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.