CSS Gradient Generator
Build a gradient, see it full width, and copy the declaration — with stop positions left to CSS unless you set them.
Runs entirely in your browser
Loading tool...
How to use
- Pick the type and drag the angle until the preview looks right.
- Add stops for a gradient of more than two colours.
- Leave a position empty to let CSS space the stop evenly.
- Copy the declaration into your stylesheet.
Features
- Linear, radial and conic, with a repeating option.
- Any colour notation accepted and normalised to hex.
- Positions optional — an empty one means evenly spaced, which is what you usually want.
- Full-width preview of the actual CSS being generated.
- Runs entirely in your browser.
Frequently asked questions
- Why leave a stop's position empty?
- Because CSS spaces unpositioned stops evenly, and that is almost always what you mean. Fixing positions is how you get a hard edge or an off-centre blend — useful deliberately, and a nuisance when it happens because a tool wrote `50%` you never asked for.
- Why does adding a third colour move my middle?
- Because a gradient is a list of stops, not a start and an end. Three unpositioned stops sit at 0%, 50% and 100%, so the second colour lands in the middle and both original colours keep their ends. If you want the new colour elsewhere, give it a position.
- What is a conic gradient for?
- Colour sweeping around a centre point rather than along a line. It is what makes a pie chart, a colour wheel or a progress ring in pure CSS. The angle sets where the sweep starts.
Related tools
A full shade scale from one colour, with the text colour that actually passes contrast on each step.
Convert between hex, RGB and HSL, and check whether two colours are readable together.
px, rem, em, pt and % against the font sizes you actually use — one value, or a whole stylesheet at once.
Strip comments and whitespace from a stylesheet without touching what is inside a string or a data URI.
Build layered box shadows that look like elevation instead of a grey halo, and paste an existing one back in to edit it.