Gradient Generator
Build linear or radial CSS gradients with a live preview.
How to create CSS gradients
Choose a gradient type — linear blends colors along a straight line at the angle you set, radial blends outward from the center like a spotlight. Then pick your colors and where each one starts and ends along the gradient line.
The preview updates as you adjust every value. When it looks right, copy the generated background rule straight into your CSS. The output is plain CSS with no vendor prefixes needed.
Gradients with stops close together (for example 40% and 60%) create a hard transition edge, which is a popular way to make crisp two-tone backgrounds instead of a smooth blend.
FAQ
What does the angle mean in linear gradients?
0deg points up, 90deg points right, and the gradient runs toward that direction. 135deg — a diagonal from top-left to bottom-right — is the most common choice for buttons and hero sections.
Can I use more than three colors?
Yes, CSS supports any number of color stops. Copy the generated code and add more stops separated by commas, e.g. linear-gradient(90deg, red 0%, yellow 50%, blue 100%).
Do gradients work in all browsers?
Yes. Unprefixed linear-gradient and radial-gradient have been supported in every major browser for years, including mobile.