CSS Gradient Generator
Add color stops, adjust the angle, and copy ready-to-use CSS for your gradient.
Color Stops
background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 50%, #22c55e 100%);How to use this tool
Choose linear or radial, set the angle for a linear gradient, and give each colour stop a position from 0% to 100%. You can have up to six stops, and they are written in order of position, so the order you add them in doesn't matter. Copy the finished rule, for example:
background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 50%, #22c55e 100%);
Reading the settings
- Angle: 0° runs from bottom to top, 90° from left to right, 180° from top to bottom. 135° goes diagonally from the top-left corner.
- Two stops at the same position make a hard edge instead of a blend, the basis of stripes and progress bars; the gradient ideas guide has ten worked examples, with contrast checked.
- Radial gradients here are circles centred in the box that reach its farthest corner, so on a wide banner the outer colour appears only at the corners.
Before pasting the rule
The copied rule uses the background shorthand, which resets every other background property, including a background-color set earlier. If the element already has a fallback colour or a background image you want to keep, change it to background-image: with the same gradient. For text on top, check contrast against the lightest and the darkest point of the gradient, not its average.
Frequently Asked Questions
Why do I see stripes instead of a smooth blend?
That is banding. Each colour channel has 256 steps, so two similar colours stretched across a wide area have only a handful of distinct values between them, and each becomes a visible band. Use stops that differ more, shorten the area the gradient covers, or add a third stop in between.
Can I animate a gradient with a CSS transition?
Not directly: browsers don't blend one gradient into another, so a transition on background jumps from one to the other. Two workarounds are common: make the gradient larger than the element and animate background-position, or declare the colours as custom properties with @property and animate those, which all current major browsers support.
Does gradient CSS need a vendor prefix for browser support?
No — linear-gradient() and radial-gradient() have been supported unprefixed in all modern browsers for years. Vendor prefixes like -webkit-linear-gradient() were only needed for very old browser versions and aren't necessary for current production sites.
Related Tools
Related Blog Posts
10 CSS Gradient Ideas You Can Copy and Customize
Ten copy-ready CSS gradients (buttons, dark surfaces, progress bars, stripes, glows, gradient text, photo overlays), plus how gradient angles work and how to avoid the muddy grey middle.
Read moreHow to Use QR Codes for Marketing, Docs, and Events
How much a QR code can hold, why a shorter or uppercase link gives a code that scans more easily, what error correction actually protects against, and how to size one for print.
Read moreHEX, RGB and HSL: How the Conversions Work and Where They Round
#4F46E5 converted to RGB and HSL step by step, why 89.4% of all colours change when copied as whole-number HSL, why HSL lightness is not brightness (yellow and blue at 50% differ eightfold in contrast), and the alpha that hex can't write exactly.
Read more