CSS Gradient Generator

How this CSS gradient generator works

A CSS gradient is an image generated by the browser, not a color value or downloaded bitmap. The output therefore uses background-image and includes a plain background-color fallback. Linear gradients blend along a line; radial gradients expand from a center; conic gradients sweep around a center.

Angles, centers, and stop order

In CSS linear gradients, 0deg points upward and 90deg points right. A conic gradient starts at the top before its from rotation and proceeds clockwise. Radial and conic centers are percentages measured from the top-left of the box. The editor preserves stop order because equal positions create useful hard edges. If a later position is lower, CSS does not reorder it: color-stop fix-up clamps that position to the preceding computed position, so the tool warns instead of silently changing your authored list.

Repeating gradients and transparency

A repeating gradient repeats the interval between its first and last effective stops. If those positions are equal, there is no useful positive repeat period; adjust them rather than relying on a browser-specific-looking result. Translucent stops are emitted as modern rgb(R G B / A) values so the transparent endpoint keeps its selected RGB channels. The preview composites the gradient over the same opaque first-stop fallback emitted in the declaration, so transparent regions match the copied result.

Accessibility and compatibility

Gradients can cross many colors, so a text color that passes contrast at one point may fail elsewhere. Test the lightest and darkest relevant regions, plus responsive crops and user themes. A CSS background cannot carry alternative text. If a conic gradient represents a chart, progress, status, or other information, provide equivalent semantic text or an accessible chart rather than relying on color wedges alone.

The generator writes current unprefixed linear-gradient(), radial-gradient(), and conic-gradient() syntax. It intentionally does not claim to parse arbitrary CSS, provide every color-interpolation method, render a PNG, or predict browser rasterization and banding. Review the CSS Images gradient specification and MDN gradient guide when extending the result.

Privacy and limits

Settings, preview, copying, and file creation happen in this browser tab. This tool makes no input-bearing request, upload, persistence, cookie, session, database, or analytics call of its own. Shared site infrastructure may deliver the page and record an ordinary page view, but it cannot read these controls through this tool. The editor is bounded to twelve stops, integer global controls, and one decimal place for positions; it builds one gradient layer at a time.