CSS Tools
CSS Gradient Generator
Linear and radial gradients with multiple colour stops and an angle dial.
Live preview
Options
Color stops
CSS
background: linear-gradient(90deg, #ec4899 0%, #6366f1 100%);
About this tool
Pick gradient type (linear or radial), drag colour stops, tweak the angle or shape, and copy the resulting CSS. Optional repeating mode gives you stripes and ribbons with a single declaration. Live preview against any background so contrast and stop positions are easy to judge.
FAQs
Linear vs radial - what's the difference?
Linear blends along a straight line at the angle you set. Radial blends outward from a centre point - circular by default, or elliptical to match the element's aspect ratio.
How many colour stops can I add?
There's no hard CSS limit, but visually anything over 8 starts to look muddy. The generator caps at 8 stops to keep the UI clean and the output readable.
What angle goes top-to-bottom vs left-to-right?
linear-gradient(0deg, …) goes bottom-to-top. 180deg goes top-to-bottom. 90deg is left-to-right, 270deg right-to-left. Keyword forms like 'to bottom right' also work.
What is a repeating gradient?
A gradient that tiles its stops - perfect for stripes, hazard tape, or ruled-paper backgrounds. Set the last stop's position small (e.g. 20px) and switch to repeating mode.
Why does the gradient look banded on my phone?
Subtle gradients band on cheap 6-bit panels. Adding tiny noise (a 1% opacity noise overlay) or sticking to nearby hues hides it. Pure black-to-white wide gradients band the most.