About this tool
Why it exists.
A good gradient is a quiet piece of design: enough depth to hold a hero, not so much that it looks like a stock template. This maker keeps the controls simple — two colors, an angle and a type — and gives you the exact CSS to paste into your stylesheet.
Radial gradients use a circular shape at the center. Linear angles follow CSS conventions: 0deg points up, 90deg points right. The generated code uses modern CSS and is ready for any framework that accepts raw CSS values.
How to use it.
- Pick two colors or start from a preset.
- Choose linear or radial and set the angle.
- Copy the CSS rule, or copy just the gradient value.
Good questions.
Can I use the generated CSS commercially?
Yes. The CSS output is just a declaration you assembled from color and angle choices. There is no license attached to a gradient made of your own color picks.
Why does the gradient look different in another browser?
Older browsers and some color-managed displays interpolate gradients differently. Modern browsers generally support sRGB interpolation consistently. If you need exact banding control, add explicit color stops or use a background image.
How do I add more than two colors?
This focused version supports two stops for clean, predictable output. In CSS, add additional colors before the closing parenthesis, for example linear-gradient(135deg, #f00, #0f0, #00f).