CSS Gradient Generator
Build a `linear-gradient()` or `radial-gradient()` CSS value visually. Add, remove, and reorder any number of color stops, set each stop's exact position from 0-100%, pick an angle for linear gradients or a shape and position for radial gradients, and watch a live preview box update as you go. When it looks right, copy the ready-to-paste `background:` declaration. Everything is assembled with plain string logic in your browser; no CSS is rendered server-side or uploaded.
Reviewed by Vincenzo Manto, Founder & Lead Developer · Last updated September 27, 2026
How it works
- 1
Choose Linear or Radial as the gradient type.
- 2
For linear, drag the angle slider; for radial, pick a shape (circle/ellipse) and a position (e.g. center, top left).
- 3
Add, remove, or reorder color stops, and set each stop's color and position (0-100%). Use 'Evenly distribute' to space them out automatically.
- 4
Watch the live preview box update, then copy the generated `background:` CSS declaration.
Why hand-writing gradient syntax is error-prone
CSS gradient functions pack a lot into one line: direction or shape, a position, and a comma-separated list of colors each with its own percentage. It's easy to lose track of stop ordering or leave a percentage sign off when writing it by hand, especially with four or five stops.
A visual builder that produces exactly what you'd write by hand
This tool assembles the same `linear-gradient()`/`radial-gradient()` syntax you'd write yourself, with a UI for reordering stops, dragging positions, and picking colors, plus a live preview so you can see the result before committing it to your stylesheet.
Frequently asked questions
What's the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle (0deg points up, 90deg points right by CSS convention). A radial gradient transitions colors outward from a center point in a circle or ellipse shape, which is useful for spotlight or vignette effects.
Can I use more than two color stops?
Yes. Add as many stops as you need with the '+ Add stop' button. Stops render in position order regardless of the order you added them, matching how the CSS spec resolves gradient stops.
What does 'Evenly distribute' do?
It recalculates each stop's position so they're spaced at equal intervals from 0% to 100% across however many stops you currently have, which is a quick way to clean up a gradient after adding or removing stops.
Can I paste any CSS color format into a stop's color field?
Yes. Hex, `rgb()`, `hsl()`, `oklch()`, or a named CSS color all work, since the generator inserts the string you type directly into the gradient function.
Is this gradient rendered or uploaded anywhere?
No. The CSS string is assembled by plain JavaScript in your browser and the preview is rendered with a local `background-image` style; nothing is sent to a server.