CSS radial-gradient

CSS radial-gradient is a CSS background property that allows you to create circular gradients. It starts with a defined shape and radiates outwards, transitioning from one color to another. The gradient is centered by default, and you can control its size and position to create various effects.

The syntax for the radial-gradient is as follows:

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

• shape: Specifies the shape of the gradient. The possible values are ellipse (default) and circle.
• size: Defines the size of the gradient. It can be specified using keywords like closest-side, farthest-side, closest-corner, or farthest-corner, or with a specific length value (e.g., 50px or 30%).
• at position: Specifies the center position of the gradient. It can be set in pixels, percentages, or keywords like center, top, left, right, bottom, etc.
• color-stop1, color-stop2, etc.: Defines the colors and their positions in the gradient. You can specify colors using color names, hexadecimal codes, RGB, RGBA, HSL, or HSLA values. Additionally, you can set the position of each color stop using percentages (e.g., 50%) or keywords (top, bottom, left, right, center, etc.).

Here’s an example of a simple radial gradient:

.gradient-example {
  background: radial-gradient(circle, #ff0000, #00ff00);
}

In this example, we use the radial-gradient to create a circular gradient (since circle is specified as the shape) that transitions from red (#ff0000) at the center to green (#00ff00) at the farthest point.

You can create more complex gradients by adding multiple color stops and adjusting their positions. Here’s an example of a more customized radial gradient:

.gradient-example {
  background: radial-gradient(ellipse closest-corner at 30% 50%, #ff0000 10%, #00ff00 50%, #0000ff 100%);
}

In this example, we use an ellipse shape, closest-corner size, and position the gradient at 30% from the left and 50% from the top. The color stops define a gradient that starts with red (#ff0000) at 10% of the radial distance, transitions to green (#00ff00) at 50%, and ends with blue (#0000ff) at 100%.

CSS radial gradients provide a powerful and flexible way to create eye-catching background effects and can be combined with other background properties like linear-gradient to create even more visually appealing backgrounds.