CSS Gradient Generator
Build a gradient background visually: drag color stops, pick linear, radial or conic, set the angle and copy ready-to-use CSS. Need an image instead? Download the same gradient as a PNG in any size.
How to use the CSS Gradient Generator
- Choose a type: Linear, Radial or Conic.
- Edit the color stops: click the bar to add a stop, drag the handles to move them, and change color, position or opacity in the list below.
- Set the direction with the angle slider or arrow buttons, or the center, shape and size for radial and conic gradients.
- Press Copy CSS and paste the code into your stylesheet.
- Need an image? Pick a size and press Download PNG.
CSS gradient syntax cheat sheet
| Type | Example | Result |
|---|---|---|
| Linear | linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%) | Coral on the left fading to peach on the right |
| Linear, 3 stops | linear-gradient(180deg, #a1c4fd, #c2e9fb 60%, #fff) | Sky blue at the top to white at the bottom |
| Radial | radial-gradient(circle at 50% 50%, #fff 0%, #c7782f 100%) | White center glowing out to amber |
| Radial ellipse | radial-gradient(ellipse closest-side at 30% 40%, …) | Ellipse that touches the nearest edges |
| Conic | conic-gradient(from 0deg at 50% 50%, red, yellow, lime, aqua, blue, magenta, red) | A full hue wheel |
| Stripes | repeating-linear-gradient(45deg, #2f6b4f 0% 5%, #fff 5% 10%) | Diagonal stripes |
How the gradient line is calculated
For a linear gradient at angle θ in a box of width W and height H, CSS makes the gradient line pass through the center and sets its length to L = |W · sin θ| + |H · cos θ|, so the 0% and 100% positions land exactly in the corners. Example: a 1920 × 1080 image at 45° has L = 1920 × 0.707 + 1080 × 0.707 ≈ 2121 px, so a stop at 50% sits in the exact center and a stop at 25% is 530 px from the start of the line.
For a radial gradient the default size is farthest-corner: a circle centered at 50% 50% of a 1920 × 1080 box has a radius of √(960² + 540²) ≈ 1101 px. The PNG export reproduces these rules, including ellipses and the closest-side, farthest-side and closest-corner sizes.
Design tips
- Use neighbors on the color wheel (for example blue to purple) for smooth gradients; complementary pairs such as red to green pass through a muddy middle.
- Add a middle stop slightly brighter than both ends to avoid a dull gray band.
- Keep text readable: check the contrast of your text against the lightest and darkest parts of the gradient.
- Subtle is often better for UI backgrounds: try two very close tints like #e0eafc → #cfdef3.
- Export a PNG for places where CSS is not available, such as email signatures, slides or social media banners.
Frequently asked questions
How do I use the generated CSS?
Paste both lines into the CSS rule of the element, for example body { … } or .hero { … }. The first line sets a solid fallback color for very old browsers; the second line sets the gradient. Gradients are images in CSS, so you can also use them with background-image.
What does the angle mean in a linear gradient?
0deg points up, 90deg points right, 180deg down and 270deg left, so linear-gradient(90deg, red, blue) runs from red on the left to blue on the right. The gradient line is long enough to cover the corners at any angle.
What is a conic gradient?
A conic gradient sweeps colors around a center point, like a color wheel or pie chart. The from angle sets where the first color starts, measured clockwise from the top. All modern browsers support conic-gradient().
How do I make a hard line between two colors?
Give two neighboring stops the same position, for example #ff0000 50% and #0000ff 50%. Combined with Repeating gradient this creates stripes.
Is the PNG exactly the same as the CSS gradient?
The PNG is drawn with the canvas API using the same angle, gradient line length, center, shape and size rules as CSS, so it matches the preview. Tiny differences in color blending between browsers are possible.
Can I add transparency?
Yes. Lower the α (opacity) slider of a stop to fade it out. The CSS then uses rgba() colors, and the PNG keeps the transparency.