About the CSS Gradient Generator
A CSS gradient blends two or more colors into a smooth background using only CSS, with no image file. Gradients are used for buttons, banners and card backgrounds; they are lighter than images and stay sharp at any screen size.
Drag the angle dial and the color stops in this generator and the preview and the linear-gradient, radial-gradient or conic-gradient code update together.
How to use
- Choose a gradient type: Linear, Radial or Conic.
- For linear and conic gradients, turn the dial or use the slider or number field to set the angle. For radial gradients, pick the shape and center position.
- Drag the circles on the color bar to move colors, and tap an empty spot or + Add color to add more. You can also type exact colors and positions (%) in the list below.
- When you like the result, tap Copy CSS and paste it into your stylesheet.
Gradient types and syntax
| Type | Example |
|---|---|
| Linear | linear-gradient(90deg, #4f46e5 0%, #22c1c3 100%) |
| Radial | radial-gradient(circle at center, #fff 0%, #000 100%) |
| Conic | conic-gradient(from 0deg at center, red, yellow, red) |
In a linear gradient, 0deg points from bottom to top (โ), 90deg from left to right (โ) and 180deg from top to bottom (โ). The percentage after a color is where that color is fully shown. Put two colors at the same position to get a hard edge, which is how CSS stripes are made.
Design tips
- Mixing two saturated complementary colors often produces a muddy gray in the middle. Use colors that sit close together on the color wheel, or add a lighter color in between.
- When placing text on a gradient, check that it is readable on both the lightest and the darkest part. The contrast checker in the color converter tool helps with this.
- The first line, background: solid color;, is a fallback for very old browsers.
FAQ
Does it work in every browser?
linear-gradient and radial-gradient work without the -webkit- prefix in all modern browsers. conic-gradient is supported from Chrome 69, Safari 12.1 and Firefox 83.
Can I apply a gradient to text?
Yes. Combine the copied background code with background-clip: text; -webkit-background-clip: text; color: transparent; and the text takes on the gradient.
How many colors can I add?
This tool allows up to 12 color stops. CSS itself has no limit.
Why does the code start with a plain background color?
If a browser cannot draw the gradient, it ignores that line and keeps the solid color from the line above, so the element never ends up with no background.