CSS Radial Gradients

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center. Radial Gradient – Evenly Spaced Color Stops (this is default) The following example shows a radial gradient with evenly spaced color stops:

Example

#grad {
  background-image: radial-gradient(red, yellow, green);
}

Result

Radial Gradient – Differently Spaced Color Stops The following example shows a radial gradient with differently spaced color stops:

Example

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Result


Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse. The following example shows a radial gradient with the shape of a circle:

Example

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Result


Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:
  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Example

A radial gradient with different size keywords:
#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

Example

A repeating radial gradient:
#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Result


CSS Gradient Properties

The following table lists the CSS gradient properties:
Property Description
background-image Sets one or more background images for an element
www.w3schools.com

3D Effect

Portal scene

UI Design