Prev Next

CSS Conic Gradients

CSS Conic Gradients allow you to create gradients that rotate around a central point, much like the slices of a pie chart. They are defined using the conic-gradient() function.

Key Topics

Basic Conic Gradient

A basic conic gradient transitions smoothly between two or more colors around a central point, starting at the top by default.

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

Explanation: This gradient transitions from red to blue in a circular pattern starting at the top of the element.

Color Stops

Color stops allow you to define precise points for color transitions within the gradient. You can specify them using angles or percentages.

<style>
        .color-stops {
            width: 300px;
            height: 300px;
            background: conic-gradient(red 0deg, yellow 90deg, green 180deg, blue 270deg);
            margin: 20px;
            border-radius: 50%;
        }
</style>
<div class="color-stops"></div>

Explanation: The gradient transitions from red to yellow, green, and blue at specified angles, creating distinct segments.

Positioning Conic Gradients

By default, the gradient's center is positioned at the center of the element. You can change its position using keywords or percentages.

<style>
        .positioned-conic {
            width: 300px;
            height: 300px;
            background: conic-gradient(at top left, red, yellow, green);
            margin: 20px;
            border-radius: 50%;
        }
</style>
<div class="positioned-conic"></div>

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

Repeating Conic Gradients

The repeating-conic-gradient() function creates repeating patterns of conic gradients, ideal for pie-chart-like designs or decorative patterns.

<style>
        .repeating-conic {
            width: 300px;
            height: 300px;
            background: repeating-conic-gradient(red 0deg, yellow 30deg, green 60deg);
            margin: 20px;
            border-radius: 50%;
        }
</style>
<div class="repeating-conic"></div>

Explanation: The gradient repeats every 60 degrees, creating a pie-chart-like design with alternating red, yellow, and green sections.

Key Takeaways

  • Basic Conic Gradient: Transitions colors in a circular pattern around a central point.
  • Color Stops: Specify angles or percentages for precise transitions.
  • Positioning: Change the gradient's center point for creative designs.
  • Repeating Gradients: Create repeating conic patterns for decorative or illustrative purposes.
Prev Next