Gradient Generator
Build the gradient, copy the CSS.
- Runs in your browser
- Free, no signup
Two to four stops. Drag a percentage to move where a colour starts, or leave them evenly spaced.
Paste it into a background or
background-image declaration.
The preview and the CSS come from one function, so what you copy is what you are looking at. Stops carry an 8-digit hex when they are translucent.
Your colours are converted in this browser. Nothing is uploaded and nothing is saved.
Build a gradient with two to four colour stops and take away the CSS. The preview and the code are produced by the same function, so what you copy is exactly what you are looking at — including the 8-digit hex codes when a stop is translucent.
Everything is a plain CSS gradient: no SVG, no background images, nothing to download, and it scales to any size without artifacting.
How to use this tool
- Choose linear or radial.
- Set the angle for a linear gradient — 0° points up, 90° points right.
- Adjust each stop’s colour, and drag its percentage to move where it starts.
- Add a third or fourth stop if you need one, then copy the CSS.
How the angle works
The angle is the direction the gradient runs in, measured clockwise from the top. 0deg runs upwards, 90deg runs to the right, 180deg downwards and 270deg to the left, so 135deg runs towards the bottom right corner.
- 0deg — bottom to top
- 90deg — left to right
- 135deg — towards the bottom right
- 180deg — top to bottom
Stops and positions
Each stop is a colour and a position as a percentage of the line the gradient runs along. Even spacing — 0%, 50%, 100% for three stops — is the usual starting point, and moving a stop closer to its neighbour produces a harder transition, which is how a two-band look is made without a third colour.
Radial gradients
A radial gradient has no angle: it runs from a centre outwards. This tool centres it, which is the common case for a vignette or a subtle glow behind a heading. Very large radial gradients on a wide screen are one of the more expensive things a page can paint, so they are worth measuring rather than assuming.
Frequently asked questions
What does 135deg mean?
The gradient runs towards the bottom right corner. Angles are measured clockwise from the top, so 0deg points up and 90deg points right.
How many stops can I use?
This tool builds two to four. CSS itself has no limit, but past four the code is usually easier to write by hand than to adjust with sliders.
Does the CSS work everywhere?
linear-gradient() and radial-gradient() are supported by every browser in current use, and no prefix is needed. 8-digit hex in a stop is the newer part, and is supported in all current browsers.
Why can two close colours look banded?
Screens show 8 bits per channel, so a slow transition across a large area can show steps. Browsers dither gradients to reduce it; adding a slightly larger difference between stops, or a subtle noise overlay, is the usual fix.