CSS Gradient Generator
Design linear, radial and conic gradients visually — drag colour stops, adjust opacity and angle, and copy production-ready CSS. Everything updates live in your browser.
Presets
Type
Colour stops
Direction
Shape & size
Centre position
Output
What Is a CSS Gradient?
A smooth transition between two or more colours, drawn by the browser — no image file needed.
A CSS gradient is a generated image, so it's used anywhere an image can go: usually background or background-image, but also border-image, mask-image and list-style-image. Because the browser draws it, a gradient is resolution-independent, weighs only a few bytes and never needs an extra HTTP request.
There are three kinds. Linear gradients run along a straight line at any angle. Radial gradients spread outwards from a centre point as a circle or ellipse. Conic gradients sweep around a centre point like the hands of a clock — ideal for pie charts and colour wheels.
Each gradient is a list of colour stops: a colour plus an optional position. Colours blend between neighbouring stops; two stops at the same position create a hard edge, which is how stripes and segmented bars are made. The repeating- versions tile the pattern after the last stop.
Stops can be partly transparent, so a gradient can fade an image into the page or darken a photo behind text. Use the Grid preview background to see exactly where your gradient is see-through.
Gradient Syntax Cheat Sheet
The parts of each gradient function and what they do.
linear-gradient(90deg, red, blue)
The angle sets the direction: 0deg points up, 90deg right, 180deg down (the default). Keywords like to right or to bottom left work too.
radial-gradient(circle at 30% 40%, …)
circle or ellipse (default), an optional size keyword (closest-side, farthest-corner…) and a centre position after at.
conic-gradient(from 90deg at 50% 50%, …)
Colours rotate around the centre. from sets the starting angle. Stops can be given in % or degrees.
Colour stops: #f00 0%, #00f 100%
Positions are optional — stops without one are spread evenly. Two stops at the same position make a sharp line instead of a blend.
repeating-linear-gradient(…)
Repeats the stop pattern. End the last stop before 100% (e.g. #000 0 10px, #fff 10px 20px) to see the repeat — great for stripes.
Transparency
Use rgba(), hsla() or 8-digit hex (#00000080) for see-through stops. Fading to transparent works in all modern browsers.
How to Use the CSS Gradient Generator
Get your result in under ten seconds.
Pick a type or preset
Start from a preset or choose linear, radial or conic. Your last design is restored automatically.
Shape the colours
Click the bar to add stops, drag them into place and set each colour and opacity. Adjust the angle or centre.
Copy the CSS
Choose HEX, RGB or HSL output and press Copy CSS. Paste it into your stylesheet.
Why Use the CSS Gradient Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Drag-and-drop stops
Place colour stops exactly where you want them with the mouse, touch or keyboard.
All gradient types
Linear, radial, conic and their repeating versions — with shape, size and centre controls.
Real transparency
Per-stop opacity with a checkerboard preview, so fades over images look right.
Clean output
Default values are left out, stops are sorted and colours come in the format you choose.
Smooth and light
Updates once per frame while you drag — no lag, even on low-end phones.
Private
Runs entirely in your browser. Nothing is uploaded or tracked.
Frequently Asked Questions
Click anywhere on the colour bar to add a stop — it takes the colour that's already at that point, so the gradient doesn't jump. Select a stop and press Remove stop or the Delete key. A gradient needs at least two stops; you can have up to 16.
Linear gradients change colour along a straight line, radial gradients change outwards from a centre point, and conic gradients change around a centre point (like a colour wheel or pie chart).
The pattern only repeats after the last stop. If your stops span 0% to 100%, there's no room to repeat. Move the last stop to, say, 20% and the pattern will tile.
They're all equivalent. HEX is the most compact; RGB and HSL are easier to read and tweak by hand. Transparent stops are written as 8-digit hex, rgba() or hsla().
It's a solid colour (the average of your stops) written before the gradient. If the gradient line is ever dropped — for example by an old browser or a typo during editing — the element still gets a matching background instead of none.
Yes. For text, use background: …gradient…; with -webkit-background-clip: text; background-clip: text; color: transparent;. For borders, use it as border-image.
Linear and radial gradients work in every browser in use today; conic gradients work in all modern browsers (Chrome, Edge, Firefox, Safari) since 2021. No vendor prefixes are needed.
Only on your device, in your browser's local storage, so it's still there when you come back. Press Reset to clear it. Nothing is sent to a server.