Compose linear, radial, and conic CSS gradients with draggable color stops, then copy background-image or full
background rules. Toggle repeating variants, try presets, or randomize — everything runs in your browser with no uploads.
Linear uses an angle; radial radiates from a center; conic sweeps around a point.
repeating-linear-gradient, repeating-radial-gradient, or repeating-conic-gradient.
At least two stops. Adjust positions (0–100%) to control how colors blend.
CSS gradients let you fill backgrounds with smooth blends between two or more colors. This tool builds valid linear-gradient,
radial-gradient, and conic-gradient values (plus repeating variants) so you can paste them into stylesheets or inline styles without memorizing syntax.
0deg points up, 90deg to the right.
center or
top left).
Each stop is a color plus an optional position from 0% to 100%. Stops are sorted automatically in the exported CSS. For repeating gradients, spacing between stops controls how often the pattern repeats — narrow bands produce stripes; wide blends look softer.
Native color pickers on this page use opaque sRGB. For rgba() or hsla() stops, paste edited values into the HEX field if your browser allows, or copy the generated CSS and
replace color tokens manually.
No. Gradients are computed entirely in your browser. Nothing is sent to a server when you adjust colors or copy CSS.
background-image only sets the gradient layer. The full background shorthand can also set color, position, and size — useful when you want a fallback color under the
gradient. This tool offers both copy options.
Repeating functions tile the gradient between the first and last stop positions. If stops are far apart or colors contrast strongly, you get obvious bands. Tighten stop spacing or soften colors.
Modern evergreen browsers support conic-gradient. Very old browsers do not; provide a solid background-color fallback if you must support legacy clients.
Design tools use their own color engines and export settings. This page outputs standard CSS for the browser — expect small differences in interpolation and gamut.
Gradients apply naturally to background-image. For text you typically combine background-clip: text with transparent fill; for borders, border-image or
layered backgrounds — adapt the copied CSS in your own stylesheet.
Circle uses a uniform radius; ellipse stretches to fit the box, which usually matches rectangular elements better. Try both on your target element size.
The UI allows several stops for complex blends. Extremely long lists are valid CSS but can be hard to maintain — consider simplifying or using design tokens in larger projects.
No. Use it for quick exploration and prototypes. Production teams should still document approved gradients, tokens, and accessibility-tested combinations centrally.