CSS Gradient Generator
Build a linear or radial CSS gradient from multiple colors, with a live preview and one-click copy.
- Live preview — see the gradient full-size before you copy anything.
- Add, remove and reposition up to 8 colour stops, not just two.
- Copies a ready-to-paste `background:` declaration, not just a colour list.
- Type each colour as a hex value or pick it with the native colour dialog.
- Free, no sign-up, and runs entirely in your browser.
Why this is private
- Calculated locally in your browser.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Builds a CSS gradient — linear at any angle, or a radial circle — from two or more colour stops, and shows the exact declaration to paste into your stylesheet. The preview updates as you change the type, angle, colours or stop positions, and nothing you enter leaves your browser.
How to use it
- 1Choose Linear or Radial.
- 2For a linear gradient, drag the angle slider (0–360°). 0° points up, 90° points right, 180° points down.
- 3Set each colour stop's colour and position (0–100%) — type a hex code or use the colour swatch.
- 4Add Color for a third stop or more, or remove one down to a minimum of two.
- 5Copy the generated `background: linear-gradient(…)` / `radial-gradient(circle, …)` declaration into your CSS.
What is a CSS gradient?
A CSS gradient is an image generated by the browser that blends smoothly between two or more colours. Because it is a `<image>` value, it goes wherever an image can — most often as `background` or `background-image` — and it scales to any size without becoming pixelated.
Gradients are drawn by the browser at render time, so they add no network request and no file to download, unlike a PNG or JPG of the same effect.
Linear vs radial gradients
A linear gradient (`linear-gradient()`) runs the colour transition along a straight line. The angle sets the line's direction: `0deg` bottom-to-top, `90deg` left-to-right, `180deg` top-to-bottom, `135deg` (a common default) from the top-left corner to the bottom-right.
A radial gradient (`radial-gradient()`) spreads outward from a centre point in rings. This tool outputs `radial-gradient(circle, …)`, which produces an evenly circular blend regardless of the element's aspect ratio.
How to use the generated code
The tool copies a full declaration, e.g. `background: linear-gradient(135deg, #7c3aed, #eb6834);`. Paste it onto any element rule in your stylesheet or a `style` attribute.
Each colour stop has its own position (0–100%), so you can bunch colours together or spread them out — `linear-gradient()` and `radial-gradient()` both render stops in position order regardless of the order you added them in.
For a gradient that sits behind other backgrounds, use `background-image` instead of the `background` shorthand so you don't overwrite `background-color`.
Frequently asked questions
What people use it for
Related tools
All design toolsReady to use CSS Gradient Generator?
CSS Gradient Generator