Prev Next

CSS Radial Gradients

CSS Radial Gradients create a gradient that radiates outward from a central point. They are defined using the radial-gradient() function and can include multiple colors, shapes, and sizes.

Key Topics

Basic Radial Gradient

A basic radial gradient transitions smoothly between two colors, radiating from the center by default.

<style>
        .basic-radial {
            width: 300px;
            height: 300px;
            background: radial-gradient(red, blue);
            margin: 20px;
        }
</style>
<div class="basic-radial"></div>

Explanation: The gradient transitions smoothly from red at the center to blue at the edges of the element.

Shape and Size

You can specify the shape (circle or ellipse) and size (closest-side, farthest-side, closest-corner, farthest-corner) of the gradient.

<style>
        .circle-gradient {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, red, blue);
            margin: 20px;
        }
        .ellipse-gradient {
            width: 300px;
            height: 200px;
            background: radial-gradient(ellipse, red, blue);
            margin: 20px;
        }
</style>
<div class="circle-gradient"></div>
<div class="ellipse-gradient"></div>

Explanation: The first gradient forms a perfect circle, while the second creates an ellipse. Both radiate outward with red at the center and blue at the edges.

Multiple Color Stops

Radial gradients can include multiple color stops, which specify intermediate colors and their positions.

<style>
        .multi-color-gradient {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, red, yellow 50%, green);
            margin: 20px;
        }
</style>
<div class="multi-color-gradient"></div>

Explanation: The gradient transitions from red at the center to yellow at 50%, and then to green at the edges, creating distinct zones of color.

Positioning Gradients

Gradients can be positioned anywhere within an element by specifying the center point (e.g., at top left, at 50% 50%).

<style>
        .positioned-gradient {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle at top left, red, blue);
            margin: 20px;
        }
</style>
<div class="positioned-gradient"></div>

Explanation: The gradient's center is positioned at the top-left corner, creating an asymmetrical design.

Repeating Radial Gradients

The repeating-radial-gradient() function creates a repeating pattern of radial gradients.

<style>
        .repeating-radial {
            width: 300px;
            height: 300px;
            background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
            margin: 20px;
        }
</style>
<div class="repeating-radial"></div>

Explanation: The gradient repeats every 20% of the element's radius, creating concentric rings of red, yellow, and green.

Key Takeaways

  • Basic Radial Gradient: Creates smooth transitions from a center point outward.
  • Shape and Size: Customize the gradient's shape (circle or ellipse) and size.
  • Multiple Color Stops: Add intermediate colors for more complex designs.
  • Positioning: Move the gradient's center point for creative layouts.
  • Repeating Gradients: Use repeating-radial-gradient() for decorative patterns.
Prev Next