CSS Gradient Generator
Build linear and radial CSS gradients with a live preview.
Pick linear or radial, drag the angle slider, edit colour stops with position percentages. The live preview updates as you move and the CSS is one click away.
background: linear-gradient(135deg, #0a7cff 0%, #a855f7 100%);
How to use it
Pick linear or radial
Linear has an angle; radial centres on the element.
Edit colour stops
Click a swatch to change colour; set its percent position. Add / remove with the buttons.
Copy the CSS
The `background:` declaration is ready to paste into your CSS.
What is it?
A CSS gradient generator builds the linear-gradient(...) or radial-gradient(...) function string from a list of colour stops. Each stop has a colour and a position; CSS interpolates between consecutive stops. The output is a single `background:` declaration you can paste anywhere.
When to use it
Hero backgrounds, button highlights, card backdrops, illustrative dividers, brand systems where you want subtle depth without using an image, dark-mode accents.
Common mistakes
Putting too many colour stops too close together - the gradient looks busy. Using fully-saturated complementaries (e.g. red and green) at 50% each - the perceptual middle is muddy unless you add a neutral midpoint. And forgetting fallback `background-color` for users where the gradient fails to render.
FAQ
- Why does my gradient look banded?
- CSS gradients are linearly interpolated in sRGB, which can produce a dark muddy middle between two saturated colours. Use the OKLCH-based syntax (linear-gradient(in oklch, ...)) for perceptually-uniform gradients in modern browsers.