Color tools
CSS Gradient Generator: Linear, Radial and Conic
Free, no sign-up, works in your browser. Design a linear, radial or conic gradient with as many colour stops as you like, see it live, and copy the CSS. Download it as a PNG background in common sizes.
Colour stops
CSS
background: #ff7ac6; background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);
The first line is a solid colour for very old devices that can’t show gradients.
Start from a preset
Made on your device.
How to use the CSS Gradient Generator
- Pick linear, radial or conic, and set the direction.
- Choose colours and drag each stop into place.
- Copy the CSS or download the gradient as an image.
Frequently asked questions
- How do I use the CSS?
- Paste it into the rule for the element you want to colour. The first line is a solid fallback; the second is the gradient.
- What's the difference between linear, radial and conic?
- Linear blends along a straight line, radial spreads out from the centre, and conic sweeps around the centre like a colour wheel.
- Can I use transparency?
- Yes. Type a colour like rgba(47, 91, 255, 0.5) into a stop.
- Is anything uploaded?
- No. Gradients are made on your device.
- Is the CSS Gradient Generator free?
- Yes. It's free to use, with no sign-up and nothing to install.
Related tools
- Color Palette GeneratorGenerate colour palettes at the press of a key, lock the colours you like, or build one from a base colour with analogous, complementary or triadic harmonies. Export as CSS variables, Tailwind or JSON.
- HEX to RGB Color ConverterConvert a colour between HEX, RGB, HSL, HSV and CMYK in one step, including transparency. Paste a code in any format or pick a colour, then copy the format you need and check its text contrast.
- Color Contrast CheckerCheck whether text is readable on its background with the WCAG contrast ratio, see AA and AAA results for normal text, large text and controls, and get the closest colour that passes.