Codestin Search App

radial-gradient() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The radial-gradient() CSS function is used to create an image consisting of a smooth transition between two or more colors radiating outward from a central point. Unlike linear-gradient(), which progresses in a straight line, radial-gradient() spreads colors in a circular or elliptical pattern, making it ideal for creating backgrounds that mimic natural light, highlight effects, or subtle color halos.

The gradient’s shape can be circular or elliptical, and the size can be adjusted to cover the entire element, contain within a specific boundary, or follow a keyword like closest-side or farthest-corner. The function can also accept an optional position, typically defined with keywords such as center, top left, or coordinates relative to the element.

radial-gradient() is commonly used with the background-image property to create layered and visually engaging effects. For example, a soft radial glow around a button can be achieved without images:

button {
  background-image: radial-gradient(circle, #ffcccc, #ff6666);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
}

You can combine multiple radial-gradient() layers in a single background declaration, separated by commas, to produce complex patterns. Additionally, transparency can be applied using RGBA or HSLA colors, allowing gradients to blend seamlessly with other elements, such as a div or section, creating depth and texture effects.

Overall, radial-gradient() is a versatile function for enhancing the visual appeal of web elements without relying on external images, offering precise control over color transitions, shapes, and positioning.

Syntax

radial-gradient() = radial-gradient(

  [ [ circle               || <length> ]                          [ at <position> ]? , |

    [ ellipse              || [ <length> | <percentage> ]{2} ]    [ at <position> ]? , |

    [ [ circle | ellipse ] || <extent-keyword> ]                  [ at <position> ]? , |

    at <position> ,

  ]?

  <color-stop> [ , <color-stop> ]+

)



/* where.. */

<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side



/* and */

<color-stop> = <color> [ <percentage> | <length> ]?

Values

<position>The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.
<shape>The gradient's shape. The value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse.
<extent-keyword>
A keyword describing how big the ending shape must be. The possible values are:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
<linear-color-stop>A color-stop's <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.
<color-hint>The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Example

HTML

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

CSS

.radial-box {

  width: 300px;

  height: 300px;

  border-radius: 12px;

  

  /* Syntax: radial-gradient(shape size at position, start-color, ..., last-color) */

  background: radial-gradient(circle, #2de2e2, #003366);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS radial-gradient() function. Hover over a browser icon to see the version that first introduced support for this CSS function.