CSS Gradient Generator
Every gradient on the web is one line of CSS - this generator builds that line visually: pick two colors, dial an angle or switch to radial, watch the live preview, and copy the exact declaration. The preview uses the browser’s real rendering engine, so what you see is byte-for-byte what ships.
The presets are tuned starting points: sunset for hero sections, ocean for calls to action, midnight for dark-mode headers - each one a different angle, which is half of what makes a gradient feel right.
How to use
- Pick start and end colors, set the angle (0deg points up, 90deg points right), or switch to radial for a center-out blend.
- Copy CSS puts the finished background declaration on your clipboard, ready to paste into a stylesheet.
- The URL carries your colors and angle - share the link and a teammate opens the same gradient.
Frequently asked questions
Why does my gradient look banded?
Banding appears when the two endpoint colors are close in lightness: 8-bit displays offer only 256 steps per channel, so a low-contrast blend shows visible rings. Adding a subtle intermediate stop, slight noise, or nudging the lightness apart all hide it.
What is the difference between 0deg and 90deg?
In CSS, angles point toward where the gradient is heading: 0deg goes bottom-to-top, 90deg left-to-right, 180deg top-to-bottom. Design tools often use compass-style angles, which is the classic source of a gradient coming out sideways.
When should I use radial instead of linear?
Radial radiates from a center point outward - natural for glows, spotlights and vignettes; linear sweeps in one direction - natural for skies, buttons and section backgrounds. Switching the type is often the fastest fix for a gradient that feels "wrong" without being broken.
Do I still need vendor prefixes?
No - unprefixed linear-gradient and radial-gradient have worked in every browser since 2013-ish. Pages that still emit -webkit-gradient (the ancient two-value syntax) are carrying dead code from the IE era.