Mastering CSS conic-gradient: From Basics to Stunning Visual Effects

Introduction

CSS conic-gradient is a future standard that enables amazing graphics. Thanks to Lea Verou, developers can experiment with this property early.

Related Gradient Functions

linear-gradient

: linear gradient radial-gradient: radial gradient

API

The simplest usage of conic-gradient is shown below:

Differences from Linear and Radial Gradients

linear-gradient

creates a gradient along a straight line at any angle. radial-gradient expands outward from a central point in an elliptical shape.

The direction of a conic gradient starts at the center and proceeds clockwise.

Creating a Color Wheel

Using conic-gradient you can build a simple color wheel:

conic-gradient: (red, orange, yellow, green, teal, blue, purple)

Each color segment is equally spaced, and adding border-radius: 50% makes it circular.

Using HSL for Richer Colors

hsl() stands for hue‑saturation‑lightness.

Hue (H) defines the basic color.

Saturation (S) defines color purity (0‑100%).

Lightness (L) defines brightness (0‑100%).

By varying only the hue from hsl(0%,100%,50%) to hsl(100%,100%,50%) you can generate a smooth spectrum of 20 intermediate colors using SCSS.

Using Percentages for Pie Charts

Specify exact percentages for each segment to create a pie chart:

Combining with background-size

Applying background-size to a conic gradient creates tiled patterns.

Repeating Conic Gradient

The repeating-conic-gradient function can fill an area with repeated segments, e.g., conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg).

Animating Conic Gradients

Using SCSS you can generate random multi‑color conic gradients and animate them with rotation.

Mix‑Blend‑Mode Experiments

Explore mix-blend-mode to blend multiple conic gradients for sci‑fi effects.

Real‑World Use Case: Credit Score Background

A practical example shows how conic-gradient can render a credit‑score bar without JavaScript.

Polyfill Support

Because conic-gradient is still in the revising phase, Lea Verou provides a polyfill that converts the CSS syntax to a Base64‑encoded image via a small JavaScript library.

After adding the polyfill, the generated image replaces the background-image: url() value, so the library is not needed in production.

Conclusion

The conic-gradient function opens up a wide range of visual possibilities for modern web design, from static color wheels to animated, blended backgrounds, and can be safely used with a polyfill for broader browser support.