CSS Radial Gradients

CSS Radial Gradients are used for creating visually appealing backgrounds on web pages. This inbuilt CSS function allows you to create a smooth transition between two or more colors, originating from a central point and expanding outward in a circular or elliptical shape. By default, the gradient starts at the center of the element and transitions to the edge.

Additionally, you can create repeating effects using the repeating-radial-gradient() function. This article will explore the syntax, parameters, and practical applications of CSS radial gradients.

Understanding CSS Radial Gradients

Radial gradients are defined by their shape, size, position, and the colors used in the gradient. They offer flexibility in design, allowing for creative and dynamic backgrounds.

Syntax:

background-image: radial-gradient( shape size at position, start-color, ..., last-color );

Parameters: This function accepts many parameters which are listed below: 

• shape: This parameter is used to define the shape of the gradient. It has two possible value circles or ellipses. The default shape value is an ellipse.
• size: This parameter is used to define the size of the gradient. The possible value are:
  • farthest-corner (default),
  • closest-side, closest-corner
  • farthest-side.
• position: This parameter is used to define the position of the gradient. The default value is the center.
• start-color, …, last-color: This parameter is used to hold the color value followed by its optional stop position.

CSS Radial Gradient Examples

Here are some examples demonstrating the use of CSS radial gradients:

Example 1: Simple Radial Gradient

This example creates a basic radial gradient starting from the center.

Output:

👁 Screenshot-(39)

Example 2: Non-Centered Radial Gradient

This example creates a radial gradient that starts from the top left corner.

Output:

👁 Screenshot-(40)

Example 3: Repeating Radial Gradient

This example creates a repeating radial gradient pattern.

Output:

👁 Screenshot-(41)

CSS radial gradients provide a visually appealing method for creating background effects on web pages. By understanding the syntax and parameters, you can create a variety of gradient designs, from simple transitions to complex repeating patterns. These gradients are widely supported across modern browsers, ensuring a consistent user experience. Experiment with different shapes, sizes, positions, and color combinations to enhance your web design projects.