CSS Gradient Generator

CSS gradient generator

This tool builds linear and radial CSS gradients visually and hands you the exact background value to paste into your stylesheet. It is for front-end developers and designers who want a precise gradient without hand-writing the syntax or guessing at angles. Reach for it when styling buttons, hero sections, cards or text fills.

How it works

The generator assembles a standard CSS gradient string from your inputs. Each colour stop becomes a colour position% pair, and the pairs are joined with commas. For a linear gradient it produces linear-gradient(<angle>deg, stop1 pos1%, stop2 pos2%, …), where the angle (0–360°) sets the blend direction. For a radial gradient it produces radial-gradient(circle, stop1 pos1%, …), blending outward from the centre. Positions are rounded to whole percentages, and the live preview applies the same string to a box, so what you see is exactly what you copy.

Angle reference for linear gradients

CSS also accepts the keyword form to right, to bottom right, etc., but the degree form gives you precise control over diagonal angles.

Worked examples

Horizontal blue-to-purple sweep — two stops at 0% and 100%:

background: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%);

Sunset three-stop gradient — add a midpoint stop:

background: linear-gradient(180deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);

The middle stop anchors the transition exactly at 50%, preventing a direct blend from orange to purple.

Radial glow — same two stops, centred:

background: radial-gradient(circle, #3b82f6 0%, #9333ea 100%);

The centre is the lightest point; the colour transitions outward symmetrically.

Gradient text fill:

.headline {
  background: linear-gradient(90deg, #3b82f6, #9333ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Apply the gradient as a background then clip it to the text shape. Both background-clip: text and the -webkit- prefixed form are needed for cross-browser support.

Multi-stop tips

• Position a stop at a sharp break by placing two stops with the same position back to back, for example #f00 50%, #00f 50%, creating a hard-edge split instead of a blend.
• Non-uniform stop positions create uneven blends — a stop at 20% followed by one at 80% leaves 60% of the space as a transition and only 20% at each solid end.
• The browser distributes stops with no explicit position evenly between the first and last stops.

Everything runs locally in your browser — your colours and code never leave your device.