CSS Gradient Generator
Build linear, radial, conic and repeating CSS gradients — stops with transparency, presets, a live preview and copy-paste code. No upload, in your browser.
Presets
background: linear-gradient(90deg, #8b5cf6 0%, #06b6d4 100%);🔒 Generated in your browser — nothing is uploaded.
Design CSS gradients visually
Add up to eight colour stops, give each one its own position and opacity, choose linear, radial or conic, and set
the angle or the radial shape, extent and centre — the preview is painted with the very background
declaration printed below it, so what you see is what you paste. Start from a ready-made preset, reroll the colours,
reverse the run or open a full-screen preview. Every configuration is captured in a shareable link.
Linear, radial and conic
A linear gradient blends colours along a straight line at the angle you set; a radial gradient blends outward from a centre you can move (as a circle or ellipse); a conic gradient sweeps colours around a centre point — handy for colour wheels, pie charts and progress rings. Tick Repeating to tile any of the three across the box. All are pure CSS with no images.
Transparency and older browsers
Drop a stop's opacity to fade a gradient into whatever sits behind it. Colours are written as hex — an eight-digit
#rrggbbaa when a stop is translucent — or as rgba() if you prefer, and a solid-colour
fallback line can be emitted ahead of the gradient for browsers too old to understand it.
Frequently asked questions
Can I use the gradient anywhere?
Yes. The generated value works as a CSS background on any element in every modern browser.
How many colours can I add?
From two up to eight stops. Each stop has its own colour, position and opacity, and you can remove any stop back down to two.
Does the angle apply to every type?
Angle applies to linear and conic gradients. A radial gradient blends outward from its centre instead, so it offers a circle/ellipse shape, an extent (farthest-corner, closest-side and so on) and a centre position rather than an angle.
Can a gradient fade to transparent?
Yes. Every stop has its own opacity slider. A translucent stop is written as an eight-digit #rrggbbaa hex, or switch the output to RGBA to get rgba() instead.
What does Repeating do?
It emits repeating-linear-gradient, repeating-radial-gradient or repeating-conic-gradient, which tiles the span your stops cover across the whole box. Move the last stop below 100% to see the repeat.
Is anything uploaded?
No. The gradient is built in your browser from your colour choices; nothing is sent anywhere.