CSS radial-gradient() Function

The radial-gradient function creates a radial color gradient.

Its shape may be a circle or an ellipse, depending on the element size.

This function is used by the background and background-image properties.

Example

#

A radial-gradient function running from center to edge.

<style>
  .radial {
    background: radial-gradient(red, purple);
    height: 250px;
  }
</style>

<div class="radial"></div>

Using radial-gradient

The radial-gradient function creates a circular or elliptical form starting at a position going outward.

Optionally, the gradient's direction can also be specified.

Syntax

radial-gradient(shape size at position, 
       color-stop-1, color-stop-2, ..., color-stop-n);

Values

#

Value Description
shape Gradient shape. Options are ellipse (default) or circle.
size Gradient size. Options are:
  farthest-corner -- meets farthest corner from center (default),
  closest-side -- meets side closest to center,
  closest-corner -- meets corner clostest to center,
  farthest-side -- meets side farthers from center.
position Gradient position. Default is center. Example values: top, left, right, center, 10% 50%, 2cm 1cm, right 30% bottom 10%, etc.
color-stop-1,
color-stop-2,
...,
color-stop-n
Color stops to create the gradient. Each stop is a color value with optional stop position. Stop positions are expressed as a length value or a percentage.

More Examples

A circular radial-gradient starting at 50px 20px with three color stops and stop positions.

<style>
  .radial-stops {
    background: radial-gradient(circle at 50px 20px, 
                   red 10%, yellow 35%, purple 85%);
    height: 250px;
  }
</style>

<div class="radial-stops"></div>

Browser support

This table shows when radial-gradient support started for each browser.

Chrome
26.0 Mar 2013
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
12.1 Nov 2012
Safari
6.1 Jun 2013

You may also like

Guides