This builds a smooth CSS linear gradient between two colors at whatever angle you set, then gives you the exact CSS to paste into your stylesheet. It saves the trial and error of writing gradient syntax by hand and lets you see the result before you commit to it.
How to use it
- Pick your first color.
- Pick your second color.
- Set the angle in degrees to control the direction.
- Watch the preview update as you change anything.
- Copy the generated CSS once it looks right.
When it helps
- A subtle background for a hero section or a call to action banner.
- A button or badge background that feels more alive than a flat color.
- A smooth fade behind text to help it stand out.
- Trying out different color and angle combinations before settling on a brand style.
- Generating gradient CSS for an email template or a tool that accepts raw CSS.
Good to know
- A subtle gradient between two closely related colors usually looks more polished than one between very different hues.
- 135 degrees is a common default, reading as a natural flow from top left to bottom right.
- Check that text stays readable over the gradient, since contrast can shift across its length.
- If a gradient looks too intense, try increasing the lightness of both colors slightly, or pick two colors closer together on the color wheel for a subtler effect.
- If you're not sure what angle looks best, generate the gradient at a few different angles side by side in your actual design rather than guessing from the small preview alone.
Questions
Can I add more than two colors?
This builds a two color gradient. For more stops, take the generated CSS and add extra comma separated colors inside the linear-gradient function by hand.
What does the angle number control?
The direction the gradient flows, in degrees. Zero points from bottom to top, and the angle increases clockwise, so 90 flows left to right and 180 flows top to bottom.
Will this gradient work in every browser?
The standard linear-gradient syntax this generates is supported by every modern browser, no prefixes needed.
Can I use this gradient as a text color instead of a background?
Yes, with extra CSS like background-clip text and a transparent text color, the same gradient can fill text, though you'd add those extra properties to the generated CSS yourself.
Does it work as a button background too?
Yes, the generated CSS is a standard background value that works on any HTML element, buttons and cards included, the same as a full page background.
Can I copy the gradient as a background image property instead of background?
The generated CSS uses the background shorthand, which works in place of background-image too. Either property name works the same way for a gradient value.