CSS Gradient Generator — Linear, Radial & Conic

The tool keeps every gradient as a structured config in memory — type, orientation (angle or shape-and-position), a list of colour stops, and a repeating flag. Every time you change a control, the config is re-serialised to a CSS gradient function value via a small pure module. The same string is fed into the preview swatch's inline style and into the read-only output box, so what you see is exactly what you copy.

Linear gradients. CSS syntax: linear-gradient(<angle>deg, <stop>, <stop>…). An angle of 0° points to the top, 90° to the right, 180° to the bottom, 270° to the left — the same compass convention CSS Images Module Level 3 §3.1 uses. The starting point sits on the painting area edge that the angle vector originates from; the colour line runs across the area along the vector and back. Hard stops (two stops at the same position) produce zero-width transitions.

Radial gradients. CSS syntax: radial-gradient(<shape> <size> at <pos>, <stop>…). The shape is circle or ellipse. The size keyword tells the browser which edge or corner of the painting area sets the 100% stop — closest-side, closest-corner, farthest-side, or farthest-corner. The position is the centre of the gradient, in percent of the box (50% 50% is dead-centre). The same precedence is normative in CSS Images 3 §3.2.

Conic gradients. CSS syntax: conic-gradient(from <angle>deg at <pos>, <stop>…). Stops are painted around the centre by angle rather than by distance. 0% is at the starting angle (default: 12 o'clock, 0°) and progresses clockwise. Conic gradients are the easiest way to render a pie-chart segment or a colour wheel without an SVG. The function was added in CSS Images Module Level 4 §4.3 and ships in every modern browser today.

Repeating variants. Prefix the function name with repeating-and the stop list tiles across the entire painting area. The last stop's position becomes the tile size — so for a repeating linear at 45° with stops at 0%, 10%, 10%, 20%, you get sharp stripes one-fifth of the diagonal apart. Use the “Striped” preset to see this in action.

Output formats. The generator emits three formats. The default is a single background:declaration. The “With fallback” option adds a solid-colour line above the gradient, so old browsers and HTML-email clients still get a readable background. The “Tailwind v4” option emits a bg-[image:…] arbitrary value that drops straight into a JSX className — escaping is handled for you.

Every output is silently round-trip verified on load — the eight built-in presets are emitted via the serialiser, parsed back via a small companion parser, and compared stop-by-stop. The badge in the editor header confirms the check passes. Same credibility guarantee shipped with the JSON formatter and colour converter elsewhere on this site.

• W3C — CSS Images Module Level 3 §3 Gradient Functions (linear & radial)
• W3C — CSS Images Module Level 4 §4.3 Conic Gradients
• MDN — linear-gradient() syntax reference
• MDN — radial-gradient() syntax reference
• MDN — conic-gradient() syntax reference

Specifications last reviewed on 2026-05-11. CSS Images Module Level 4 is a Working Draft — when it advances and the conic syntax changes, this page is re-verified.