CSS gradients are images generated by the browser. They scale perfectly, cost no download and can be animated or layered.
Linear gradients
A linear gradient blends colors along a straight line:
background: linear-gradient(135deg, #03045e 0%, #00b4d8 100%);The angle sets the direction: 0deg points up, 90deg to the right. Keywords such as to right also work.
Radial gradients
Radial gradients spread from a center point:
background: radial-gradient(circle at 30% 30%, #ffd166, #ef476f);Use circle or ellipse and set the center with at x y.
Conic gradients
Conic gradients rotate colors around a center — perfect for color wheels and pie charts:
background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red);Color stops and hard edges
Each color can have a position. Giving two colors the same position creates a hard edge, useful for stripes:
background: linear-gradient(90deg, #264653 50%, #e9c46a 50%);Avoiding muddy midpoints
Gradients between complementary colors (such as blue and yellow) can pass through gray in sRGB. Add a middle stop with a clean intermediate color, or in modern browsers interpolate in OKLab: linear-gradient(in oklab, blue, yellow). The color mixer lets you compare interpolation methods.
Build visually
The CSS gradient generator lets you add stops, drag positions and copy the finished code. You can also browse ready-made gradients in the gradient gallery.
