Results are provided for informational purposes only and may contain errors. Please verify important information independently. Use of this tool is at your own risk.
What the CSS Gradient Generator does
The CSS Gradient Generator builds a background declaration from two colors. Choose linear to blend along a line at any angle, or radial to spread from the centre outwards in a circle. The preview updates as you move the controls and the output box holds a ready-to-paste line such as background: linear-gradient(90deg, #3b82f6, #8b5cf6);.
In a linear gradient the angle sets the direction: 0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom. A radial gradient ignores the angle and uses circle, so the first color sits in the middle. Both forms are supported in every current browser without vendor prefixes, so the generated line works as it is.
When to use it
- Giving a hero section or a call-to-action button a subtle two-tone background.
- Replacing a gradient background image with CSS so the page loads one file fewer.
- Trying brand color pairs side by side before committing them to a design system.
- Building a soft radial glow behind a logo or an illustration.
Worked example
Input
Type: linear
Angle: 90
Colors: #3b82f6, #8b5cf6Output
background: linear-gradient(90deg, #3b82f6, #8b5cf6);Common questions about the CSS Gradient Generator
How do I add a third color?
Add it to the list inside the function, separated by a comma: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). You can also give each color a position, such as #8b5cf6 40%, to control where the blend happens.
Will text stay readable on a gradient?
Check the text color against both ends of the gradient with the Color Contrast Checker. If one end fails, darken it or add a semi-transparent overlay behind the text.
Can I use a gradient as a border or text fill?
Yes, with extra CSS. For text, set the gradient as background, then add background-clip: text and color: transparent. For borders, border-image accepts the same gradient function.
Why does my gradient show visible bands?
Banding appears when two similar colors are stretched across a large area. Pick colors that are further apart, shorten the area, or add a middle stop so each step is smaller.
Is this tool free?
Yes, it's free to use. No signup, no email required. Get results on this page.
How do I get my result?
Use the tool on this page. Your result appears here; no email delivery is required.