CSS gradient generator — linear, radial and conic, with live preview

How to use the CSS gradient generator

1. Pick a Type: Linear, Radial or Conic.
2. For linear and conic gradients, drag the Angle slider. For radial and conic, choose the Centre; radial also has a Shape (circle or ellipse).
3. In Colour stops, write one colour per line, optionally followed by a position such as 50% or 10px.
4. Choose an Interpolation space if you want smoother blends, and tick Repeating gradient for patterns.
5. Watch the preview update, then copy the CSS.

What it does and when to use it

The generator writes the background CSS for three kinds of gradient. A linear gradient blends along a straight line, which suits hero banners, buttons and overlays that darken the bottom of a photo. A radial gradient spreads out from a centre point, good for spotlights and soft glows. A conic gradient sweeps around a centre like a clock hand, which is how pie-chart-style rings and colour wheels are drawn in pure CSS.

It reads any CSS colour you type, including names, rgb(), hsl() and oklch(), and writes opaque colours back as hex. Stops with transparency are written as rgba(). If a colour is not recognised, it tells you which line is wrong.

To choose the colours themselves, start with the colour picker or turn a value into hex with the colour converter. If text will sit on top of the gradient, check it against the lightest and darkest parts with the contrast checker.

How it works

The tool parses each stop line, reads up to two trailing positions (bare numbers become percentages), and checks that the colour is valid. It then builds the CSS function: linear-gradient(<angle>deg, …), radial-gradient(<shape> at <centre>, …) or conic-gradient(from <angle>deg at <centre>, …), adding repeating- and in <space> when you ask for them. The first stop’s colour is written as a separate fallback line above it. Everything runs in your browser; the preview is a small sandboxed frame using the same CSS.

Worked examples

Each CSS line below is the generator’s own output.

A blend that avoids grey. Linear, 90°, stops #3b82f6 and #facc15, Interpolation OKLab, gives background: linear-gradient(90deg in oklab, #3b82f6, #facc15);

A colour wheel. Conic, 0°, centre, with the stops red, yellow, lime, aqua, blue, magenta and red again, gives conic-gradient(from 0deg at center, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000). Repeating red at the end closes the circle without a seam.

Diagonal stripes. Linear, 45°, Repeating ticked, stops #000 0 10px and #fff 10px 20px, gives repeating-linear-gradient(45deg, #000000 0% 10px, #ffffff 10px 20px).

Limits and tips

• One gradient at a time. CSS allows several gradients layered with commas; combine outputs by hand if you need that.
• Stops are typed, not dragged. Move a stop by editing its position. Uneven positions, such as 0%, 20%, 100%, shape the blend more than adding colours does.
• The fallback works best with a solid first colour. If your first stop is semi-transparent, check the fallback line before you use it.
• Gradients are images in CSS, so they also work in background-image, border-image and mask-image.
• For shadows to go with the background, try the box shadow generator.