CSS Gradient Generator
Build linear, radial and conic gradients with as many colour stops as you need, adjust every angle and position visually, and copy clean CSS.
About the CSS Gradient Generator
A gradient is the cheapest way to make a flat interface feel considered. It costs nothing to download, scales to any size without a single pixel of image data, and animates smoothly. Modern CSS supports three kinds: linear gradients that travel along an angle, radial gradients that spread from a point, and conic gradients that sweep around one — the last being how CSS-only pie charts and colour wheels are built.
Writing them by hand is where it falls apart. The syntax packs an angle or shape, a list of colours and a set of optional positions into one declaration, and small changes have large visual effects. Moving a stop from 40% to 55% can be the difference between a gradient that looks intentional and one that looks like a bug. Editing a value, saving and refreshing to find out is a slow feedback loop for a task that is entirely visual.
This generator closes that loop. Add stops, drag them along the track, change colours, rotate the angle and watch the preview respond immediately. When it looks right, copy CSS that is ready to paste. The output is plain modern CSS with no prefixes for properties that no longer need them, so it drops into a stylesheet, a styled-component, a Tailwind arbitrary value or a page builder's custom CSS box unchanged.
How to use it
- Choose a gradient typeLinear for directional blends, radial for a glow from a point, conic for a sweep around one.
- Set the directionRotate the angle for linear gradients, or set the shape and centre position for radial and conic.
- Edit the colour stopsClick a stop to change its colour, drag it to move it, and add or remove stops freely.
- Try a presetStart from one of the curated presets and adjust it — often faster than building from scratch.
- Preview at full sizeThe preview fills a realistic area so you can judge banding and colour transitions honestly.
- Copy the CSSTake the complete background declaration, ready to paste into any stylesheet.
Features
- Three gradient typesLinear, radial and conic, each with the controls that type actually needs.
- Unlimited colour stopsAdd as many as the design calls for and position each one precisely along the track.
- Draggable stop editorMove stops by dragging rather than by guessing at percentages.
- Curated presetsA set of tested gradient combinations to start from or adapt.
- Random generatorProduce a pleasing random gradient when you need a starting point rather than a specific colour.
- Clean copyable outputModern CSS with no unnecessary vendor prefixes and no wrapper classes.
Who uses this tool
- Web designersBuild hero backgrounds, button fills and card overlays without leaving the browser.
- Front-end developersGet a gradient exactly right visually, then paste the declaration straight into a component.
- Presentation designersCopy a gradient as CSS for a web deck, or screenshot the preview for a slide background.
- No-code buildersPaste a gradient into a Webflow, Framer, Squarespace or WordPress custom CSS field.
Tips worth knowing
- Gradients between colours of similar lightness look smoother. Large jumps in lightness produce a visible band through the middle.
- Add a third stop near the midpoint to control where the transition happens — a two-stop gradient always breaks at 50%.
- For text over a gradient, check contrast at both ends. The most common accessibility failure is text that passes at one end and fails at the other.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
A linear gradient blends along a straight line at an angle you set. A radial gradient blends outward from a centre point in a circle or ellipse. A conic gradient sweeps around a centre point like a clock hand, which is what makes CSS-only pie charts and colour wheels possible.
Do CSS gradients work in all browsers?
Linear and radial gradients are supported everywhere and have been for over a decade — no prefixes needed. Conic gradients are supported in all current browsers but are newer, so provide a solid-colour fallback if you must support very old versions.
How do I make a gradient that goes diagonally?
Set the angle to 45deg for bottom-left to top-right, or 135deg for top-left to bottom-right. In CSS, 0deg points upward and the angle increases clockwise, which surprises people expecting standard mathematical convention.
Why does my gradient look banded?
Banding happens when a subtle transition is spread across a large area, so the display has too few steps to render it smoothly. Increase the contrast between stops, reduce the area, or add a very subtle noise overlay — the standard fix in production design.
Can I animate a CSS gradient?
Not directly — gradients are images and are not interpolated by transitions. The usual technique is to make the background larger than the element and animate background-position, which produces a smooth moving-gradient effect.
How do I use a gradient on text?
Apply the gradient as the background, then add background-clip: text with a transparent text colour. Always include a solid fallback colour first so the text remains readable if the effect is unsupported.