CSS Gradient Generator

Linear gradients

background: linear-gradient(135deg, #2563eb, #16a34a);

The angle runs clockwise from the top: 0deg = up, 90deg = right, 180deg = down, 270deg = left. You can also write named directions by hand: to right equals 90deg and to bottom left equals 135deg.

Radial gradients

background: radial-gradient(circle, #2563eb, #16a34a);

The colors spread outward from the center of the element. Radial gradients do not use an angle; add position or size keywords by hand (at 30% 40%, ellipse) when you need more control.

Color stops

CSS gradients accept more than two colors, and each stop can take a position:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Two stops with the same position create a hard stop: the color changes instantly instead of blending. Useful for split backgrounds.

Tips

• A red to blue gradient passes through a greyish midpoint in the default sRGB interpolation. Interpolating in oklch keeps the blend colorful: linear-gradient(in oklch, red, blue), supported by modern browsers.
• transparent is not colorless: in sRGB it is rgba(0,0,0,0), so a fade to transparent passes through dark grey. Use rgba(color, 0) instead.
• Gradients render on the GPU in modern browsers, so they cost almost nothing at any size. Animating between gradients is not supported and snaps abruptly; animate the opacity of an extra layer instead.
• Text fills: combine the declaration with background-clip: text; color: transparent; to fill text with a gradient. For borders, border-image: linear-gradient(...) 1; works in modern browsers.