The CSS radial-gradient() function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape can be a circle or an ellipse. This function is a powerful tool for creating depth, focus, and visually interesting backgrounds without the need for image files.
Example 1: Basic Circular Radial Gradient
.gradient-1 {
/* Creates a simple circular gradient */
/* from yellow in the center to red at the edges */
background: radial-gradient(circle, yellow, red);
height: 200px;
width: 200px;
}
Explanation
This code generates a circular gradient that transitions from yellow at its center to red at its edges. The circle keyword dictates the shape of the gradient.
Example 2: Elliptical Radial Gradient
.gradient-2 {
/* Creates a simple elliptical gradient */
/* from a light blue to a dark blue */
background: radial-gradient(ellipse, #87CEEB, #00008B);
height: 200px;
width: 300px; /* Wider than its height to show the ellipse */
}
Explanation
Here, an elliptical gradient is created, which is the default shape if not specified. The gradient smoothly transitions from a light sky blue to a dark blue, conforming to the dimensions of the element.
Example 3: Setting the Gradient Center
.gradient-3 {
/* Positions the gradient's center at the top left */
/* 'at 0% 0%' places the center at the top-left corner */
background: radial-gradient(circle at 0% 0%, white, green);
height: 200px;
width: 200px;
}
Explanation
This example demonstrates how to control the origin of the gradient. By using at 0% 0%, the gradient's center is moved to the top-left corner of the element.
Example 4: Defining Color Stop Positions
.gradient-4 {
/* Defines specific positions for color stops */
/* Red starts at 5%, yellow at 15%, and green at 60% */
background: radial-gradient(red 5%, yellow 15%, green 60%);
height: 200px;
width: 200px;
}
Explanation
This code shows how to set precise positions for each color in the gradient. The color red will extend to the 5% mark, yellow to 15%, and green will fill the rest of the space up to the 60% mark.
Example 5: Using Sizing Keywords (farthest-corner)
.gradient-5 {
/* The gradient's size is determined by the farthest corner */
/* This is the default sizing behavior */
background: radial-gradient(farthest-corner at 40% 40%, teal, black);
height: 200px;
width: 200px;
}
Explanation
The farthest-corner keyword sets the size of the gradient to be large enough to reach the corner of the element that is farthest from its center. In this case, the gradient extends from the 40% 40% position to the bottom-right corner.
Example 6: Using Sizing Keywords (closest-side)
.gradient-6 {
/* The gradient's size extends to the closest side from its center */
background: radial-gradient(closest-side at 30% 50%, orange, purple);
height: 200px;
width: 200px;
}
Explanation
This example uses closest-side, which sizes the gradient to meet the side of the container closest to its center. This often results in a smaller, more contained gradient effect.
Example 7: Repeating Radial Gradient
.gradient-7 {
/* Creates a repeating pattern of concentric circles */
/* A blue circle from 10px to 20px, then a red circle to 30px, repeating */
background: repeating-radial-gradient(circle, blue 10px, red 20px, blue 30px);
height: 200px;
width: 200px;
}
Explanation
The repeating-radial-gradient() function is used to create a pattern of repeating concentric shapes. This code produces a series of blue and red rings that emanate from the center of the element.