CSS Conic Gradients

Welcome to The Coding College! In this guide, we’ll explore CSS Conic Gradients, a visually striking feature that creates gradients around a central point. Conic gradients are ideal for creating color wheels, pie charts, and unique artistic effects.

What Are CSS Conic Gradients?

A conic gradient transitions colors around a central point, with the colors arranged like slices of a pie or the spokes of a wheel. Unlike linear or radial gradients, conic gradients are circular and progress in a clockwise direction.

Syntax of Conic Gradients

The syntax for a conic gradient is:

background: conic-gradient(from angle, color1, color2, ...);

Key Components:

1. from angle: Sets the starting angle of the gradient (e.g., from 0deg).
2. color1, color2, ...: Defines the colors in the gradient, along with optional stop positions.

Examples of Conic Gradients

1. Basic Conic Gradient

The default conic gradient starts at the top (0°) and transitions clockwise.

div {
    background: conic-gradient(red, yellow, green, blue);
}

2. Starting Angle

You can define a starting angle using the from keyword.

div {
    background: conic-gradient(from 90deg, red, yellow, green, blue);
}

3. Gradient with Color Stops

Specify exact positions for colors using percentages or angles to control where the transitions occur.

div {
    background: conic-gradient(red 0%, yellow 25%, green 50%, blue 75%, red 100%);
}

4. Single-Slice Gradient

By repeating the same color at different stops, you can create a single slice or section.

div {
    background: conic-gradient(from 0deg, red 0deg, yellow 90deg, red 90deg, yellow 360deg);
}

5. Transparent Conic Gradient

Use rgba or hsla for transparency to create fading effects.

div {
    background: conic-gradient(from 0deg, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
}

6. Repeating Conic Gradient

Create repeating patterns with repeating-conic-gradient().

div {
    background: repeating-conic-gradient(red 0deg, yellow 30deg, green 60deg);
}

This example repeats the pattern every 60 degrees.

Practical Applications of Conic Gradients

1. Pie Charts

Conic gradients are perfect for creating pie charts without external libraries.

div {
    background: conic-gradient(red 0%, yellow 33%, green 66%, blue 100%);
}

2. Color Wheels

Create interactive or static color wheels for tools or design assets.

div {
    background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);
}

3. Artistic Backgrounds

Use conic gradients for unique backgrounds or hover effects.

Gradient with Multiple Layers

Combine conic gradients with other background layers for creative effects.

div {
    background: 
        linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
        conic-gradient(from 0deg, red, yellow, green, blue);
}

Browser Compatibility

Conic gradients are supported in most modern browsers, including Chrome, Edge, and Firefox. However, it’s always good to test your designs in different browsers to ensure compatibility.

Fallback for Older Browsers

For browsers that don’t support conic gradients, provide a fallback background color:

div {
    background-color: lightblue; /* Fallback */
    background: conic-gradient(red, yellow, green, blue);
}

Tools for Conic Gradients

Here are some tools to help you generate conic gradients quickly:

• CSS Gradient: A user-friendly gradient generator.
• Conic Gradient Generator: Specifically for conic gradients.
• Coolors: Great for creating cohesive color palettes and gradients.

Conclusion

CSS conic gradients are a game-changer for creating circular and radial designs. Whether you’re designing a pie chart, a color wheel, or a unique background, mastering conic gradients will open up endless creative possibilities.

For more tutorials and design tips, visit The Coding College.