CSS Gradient Generator
Design linear and radial CSS gradients visually and copy the code.
How to use CSS Gradient Generator
- Choose a linear or radial gradient.
- Set the angle (linear) or the shape and centre (radial), then pick your colours and move each one along the gradient.
- Add or remove colours, then click Copy CSS and paste it into your stylesheet.
About CSS Gradient Generator
A CSS gradient is a smooth blend between two or more colours, drawn by the browser with no image file. Gradients load instantly, scale to any size and are easy to change.
A linear gradient blends along a straight line. Its angle sets the direction: 0° points up, 90° points right, 180° points down. A radial gradient spreads outward from a centre point. Each colour has a position from 0% to 100% that controls where it sits in the blend. The generated CSS works in all current browsers.
Features
- Linear and radial gradients
- Angle control with direction presets
- Up to 8 colours with adjustable positions
- Live preview and copyable CSS
Frequently asked questions
How do I use the generated CSS?
Paste the line into a rule for the element you want to style, for example .hero { background: linear-gradient(...); }.
What do the colour positions mean?
A position is how far along the gradient line a colour is fully reached. Moving two colours close together makes a sharper transition between them.
Does the order of colours matter?
The output is sorted by position, so colours always appear in the order they sit along the gradient, whatever order you added them in.
Related tools
Color Picker
Pick a colour and copy its HEX, RGB and HSL values.
QR Code Generator
Create QR codes for text, URLs, email, phone numbers and WiFi, then download them.
JSON Formatter
Format, minify and validate JSON with clear error messages.
Image Cropper
Crop images freely or to a fixed aspect ratio and download the result.