About the CSS Gradient Generator
Design linear, radial or conic gradients visually and get a copy-paste-ready CSS declaration. Add between two and six colour stops, control each stop's colour and position, set the angle for linear gradients or the origin position for radial and conic ones, and watch the preview update instantly.
How to use it
- 01Choose a gradient type: linear, radial or conic.
- 02Set the angle (linear) or origin position (radial/conic).
- 03Adjust each colour stop's colour and percentage position, adding or removing stops as needed.
- 04Copy the generated CSS declaration or download it as a .css file.
Features
- Linear, radial and conic gradient types.
- 2 to 6 colour stops with independent colour and position controls.
- Angle slider for linear gradients and position presets for radial/conic.
- Live preview box and one-click copy or .css download.
Practical examples
Hero background
Create a 90-degree linear gradient from brand blue to purple for a landing page hero section.
Radial spotlight
Use a radial gradient centred at 'top left' to add a subtle spotlight effect behind a card.
Limitations
- Only percentage-based stop positions are supported; length units like px or rem are not exposed in the UI.
- Conic gradients always start from 0deg; a custom starting angle for conic gradients is not yet configurable.
Privacy
The gradient is composed and previewed entirely in your browser; no data is sent to a server.
Read the full privacy policy for how the site as a whole handles data.
Frequently asked questions
Can I reorder colour stops?
Stops are automatically sorted by their position percentage in the generated CSS, so you can add them in any order.
What's the maximum number of stops?
Six colour stops per gradient, which covers the vast majority of practical design needs.
Does the download include a full stylesheet?
The .css file contains a single background declaration you can paste into any rule.
Can I use rgba colours as stops?
Yes, type any value the colour converter accepts (hex, rgb, rgba, hsl, hsla, or named colours) into a stop's colour field.