CSS Gradient Generator
Build a CSS background gradient visually: pick colours, move their positions, set the angle and copy the CSS for your stylesheet.
No data needed
How to use
- Choose linear, radial or conic.
- Pick colours and drag their positions.
- Set the angle.
- Copy the CSS.
How it works
The tool writes standard CSS gradient functions supported by all modern browsers: linear-gradient(angle, colour position, …), radial-gradient(…) and conic-gradient(from angle, …). Stops are sorted by position so the output is always valid.
For readable text on a gradient, check the contrast of your text colour against both the lightest and darkest parts.
Examples
- Hero background
- linear-gradient(135deg, #0d6e63 0%, #3cc3b0 55%, #f5d76e 100%)
Common uses
- Hero sections and buttons
- Backgrounds and cards
- Prototyping colour ideas
Privacy & security
This tool does not take any personal data or files. Results are generated on your device. How each tool handles files
Frequently asked questions
Do I need vendor prefixes?
No. Unprefixed gradients have been supported by all major browsers for years.
Can I use transparency?
Yes — edit the CSS to use rgba() or 8-digit hex colours after copying.
Last updated: