CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the generated background property.
Processing: This tool runs entirely in your browser. Your input and any file you open stay on your device — nothing is uploaded to a server.
How to use the css gradient generator
- Choose linear or radial and set the angle or shape.
- Edit the colour stops and their positions.
- Copy the generated CSS into your stylesheet.
About this tool
CSS gradients are generated by the browser, so they scale to any size, cost nothing to download and stay sharp on every display — which makes them a better choice than an image for a background wash.
A gradient is a list of colour stops plus a direction. Two stops of similar lightness give a subtle surface; two very different hues produce a muddy band where they meet, because interpolation passes through the desaturated colours in between. Adding a third stop near the midpoint fixes that.
Common uses
- Creating a hero background that stays crisp at any width.
- Building a subtle card surface without an image request.
- Producing a placeholder that loads instantly.
Frequently asked questions
- Which direction does 0deg point?
- Upwards. Angles increase clockwise, so 90deg runs left to right and 180deg top to bottom.
- Why does my two-colour gradient look grey in the middle?
- Interpolation in sRGB passes through desaturated values between distant hues. Add an intermediate stop with the saturation you want.
Related tools
HEX to RGB Converter
Convert colours between HEX, RGB and HSL with a live preview and copyable CSS values.
Colour Contrast Checker
Check text and background colours against the WCAG 2.1 contrast requirements for AA and AAA.
Image Compressor
Reduce image file size with an adjustable quality setting and an instant before/after comparison.
Meta Tag Generator
Generate title, description, canonical, Open Graph and Twitter Card tags with live length checks.