CSS Gradient Generator
Build a gradient and copy the CSS.
background: linear-gradient(135deg, #2563eb, #9333ea);About this tool
Build a linear or radial gradient visually, adjust the stops, and copy the CSS. Faster than guessing at angle values and reloading to see what changed.
Gradients are pure CSS, so they cost nothing to load, scale to any size without blurring, and can be changed without re-exporting an asset — which is why they have replaced background images for most hero and card treatments.
Common questions
Why does my gradient look muddy in the middle?
Interpolating between two saturated colours on opposite sides of the colour wheel passes through grey. Either pick colours closer together in hue, or add a mid stop to steer the path around the dead zone.
How does the angle work in linear-gradient?
0deg runs bottom to top and the value increases clockwise, so 90deg runs left to right and 180deg runs top to bottom. You can also use keywords like `to bottom right`, which are easier to read in a stylesheet.
Do CSS gradients hurt performance?
No. They are painted by the browser and add no network request at all, so they are considerably cheaper than the background image they replace. Very large blurred radial gradients can cost a little on paint, but this is rarely a real problem.
Turn it into an interactive demo
createademo turns screenshots and recordings into demos your buyers click through themselves. Free plan, full editor, no credit card.