← Archive08 / 16
ExperimentNo. 08Updated
Gradient Variations
Compare sixteen linear, radial, conic and layered gradients. Choose a palette, select a specimen, and inspect or copy its CSS.
- Made
- Oct 2023
- Type
- CSS study
- Stack
- HTML / CSS
Conic · 1 layer
Off-center
The starting angle and center point can both move. This one starts at 45° and sits low-left.
background:
conic-gradient(from 45deg at 25% 75%, var(--s5), var(--s7), var(--s8), var(--s6), var(--s2));Linearfrom a line
Radialfrom a point
Conicfrom an angle
Layeredfrom a stack
Idea
I made a set of gradient examples to compare how angle, shape, hard stops and layers change a background.
Notes
- Linear, radial and conic gradients each spread colors in a different way. The four families make those differences easy to compare.
- Hard stops create stripes or rings without a color blend.
Revisited
- Oct 2023: first made on CodePen (v1).
- Nov 2026: rebuilt for the lab with selectable previews and two new palettes.