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.



A radial-gradient function running from center to edge.

  .radial {
    background: radial-gradient(red, purple);
    height: 250px;

<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.


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



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 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.

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

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

Browser support

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

26.0 Mar 2013
16.0 Oct 2012
10.0 Sep 2012
12.1 Nov 2012
6.1 Jun 2013

You may also like

Last updated on Sep 30, 2023