Flat colors are easy; gradients give interfaces depth, energy, and that modern feel — hero sections, buttons, cards, and mesh-style backgrounds all lean on them. Writing linear-gradient() by hand means guessing angles and color stops, reloading, and guessing again.
This generator gives you a live preview while you pick colors, adjust stop positions, and set the angle — for both linear and radial gradients — then outputs clean CSS ready to paste into your stylesheet.
How to Use This Tool
- Choose linear or radial gradient.
- Pick two (or more) colors and drag their stop positions.
- Set the angle (linear) or shape and center (radial) while watching the preview.
- Copy the generated CSS into your project.
Frequently Asked Questions
What do the percentages in color stops mean?
Each stop pins a color to a position along the gradient line: 0% is the start, 100% the end. Colors blend smoothly between stops — and placing two different colors at the same percentage creates a hard stripe edge instead of a blend.
How well are CSS gradients supported?
Universally — every modern browser supports linear and radial gradients unprefixed, and conic gradients have been safe since around 2020. Old vendor prefixes (-webkit-) are only needed for very old browsers.
Are gradients better than background images for performance?
Yes. A CSS gradient is computed by the renderer — zero network requests, zero bytes downloaded, perfectly sharp at any resolution and zoom level. Reserve image files for textures and photography that CSS cannot express.