CSS gradient generator
Pick colours, slide positions, set the angle, and copy CSS that includes the solid-colour fallback. The preview is the gradient itself, what you see is what ships.
Guide
How to use it
- Choose the type: linear (a direction), radial (from the centre) or conic (around the centre).
- Set each stop’s colour and position, add up to five stops, remove down to two.
- For linear and conic, set the angle: 0° points up, 90° right, the slider wraps the compass.
- Copy the CSS: it ships with a solid-colour first line as fallback, paste into any background property.
Examples
Gradients that earn their place
Two stops of nearly the same colour (a surface shade and its 5%-darker sibling) at 160° gives cards quiet depth without announcing "gradient". The most-used professional trick here.
Two brand colours at 35° with the mid-point nudged (stop positions 0% and 60%) reads editorial rather than default, the nudge is what separates it from every bootstrapped landing page.
Conic gradients with hard stops (blue 0%, blue 40%, gold 40%) draw pie charts and progress rings in pure CSS, no SVG, no library.
Method
How it works
The output is standard CSS: linear-gradient(angle, stops), radial-gradient(circle, stops) or conic-gradient(from angle, stops), with stops sorted by position and a solid-colour background line first, the fallback pattern for anything ancient enough to need it.
Browser support is universal for all three types (conic joined the club in 2020), so the fallback is belt-and-braces rather than necessity. Gradients render at paint time and cost nothing at runtime, unlike image backgrounds.
FAQ
Frequently asked questions
Why does my gradient band instead of blending?
Big jumps between saturated hues band visibly. Fixes: add a middle stop, bring the colours closer in lightness, or shorten the travel (stops at 20%/80% rather than 0%/100%).
Can stops share a position?
Yes, two stops at the same percentage make a hard edge, that is how CSS draws stripes and pie slices on purpose.
What angle should I use?
Convention says diagonals feel dynamic (35°, 135°), verticals feel calm (180°). Text sits best over gradients that darken toward the text’s corner.
Gradient text, possible?
Yes, with background-clip: text and transparent colour, apply this generator’s background line plus those two properties.
Should I use images instead for complex gradients?
CSS wins for anything these controls express: zero bytes, crisp at every size. Mesh-style multi-point gradients are the one case where an exported image still earns its bytes.
Do gradients affect accessibility?
Only via contrast: text over a gradient must clear 4.5:1 against its worst region. The color picker’s contrast checker takes the gradient’s lightest and darkest stops as inputs nicely.
More tools