Create CSS Gradients Visually
Adjust gradient type, angle and colour stops while a live preview updates, then copy production-ready CSS. Stops can be dragged on the track, nudged with the keyboard or typed precisely.
How to make a CSS gradient
- Choose linear, radial or conic, or click a preset to start from.
- Set the angle, or for radial and conic gradients the centre point.
- Edit colour stops: drag the handles on the track, use arrow keys on a focused handle, or set colour and position in each row. Add up to 12 stops.
- Copy the CSS, which includes a solid background-color fallback, or copy only the gradient value.
Hard stops and stripes
Two stops at the same position create a sharp edge instead of a blend. Combine that with the repeating option to make stripes or checks without any images — the Stripes preset shows how. For depth on cards, pair a subtle gradient with a layered shadow from the CSS Box Shadow Generator.
Benefits
- Keyboard-operable stop handles plus numeric inputs, so precise positioning doesn't depend on a mouse.
- Generates standard, unprefixed CSS supported by all current browsers.
- Includes a fallback colour for forced-colours modes and very old browsers.
Limitations
- Gradients are interpolated in sRGB, the CSS default; newer "in oklch" interpolation is not generated.
- Colour stops use HEX values; set transparency by editing the CSS afterwards or using a stop colour that matches your background.
Privacy and security
The gradient is assembled from your settings inside this page. No data is collected or uploaded.
Read our privacy policy for details about the site as a whole.
Frequently asked questions
What does the angle mean in linear-gradient?
0deg points up, 90deg points right and 180deg points down: the gradient runs towards that direction. So linear-gradient(90deg, red, blue) goes from red on the left to blue on the right.
Why are there muddy grey colours in the middle of my gradient?
Blending two complementary colours in sRGB passes through desaturated tones. Add a third stop with a brighter mid colour to keep the transition vivid.
Do I need vendor prefixes?
No. Unprefixed linear, radial and conic gradients work in every browser released in the last several years.