Gradient Generator
Choose a gradient type, set your colors, and copy the CSS when it looks right.
.my-gradient {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
}What is the CSS Gradient Generator?
CSS gradients blend two or more colors smoothly — no images, no extra HTTP requests,
just pure CSS. This free online tool builds the background declaration for
linear and radial gradients with a live preview, so you can experiment with color
combinations and stop positions before copying the finished CSS into your project.
How to use it
Choose Linear or Radial as the gradient type. For linear gradients, set the angle — 135° is a popular diagonal. Then pick a color for each stop and drag the position sliders to control where each color reaches full strength. When the preview looks right, click Copy CSS.
Example
.hero {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
} A diagonal blue-to-purple gradient is a common starting point for hero sections and call-to-action banners.
Tips and best practices
- Analogous colors — neighbors on the color wheel — blend the cleanest. Complementary pairs can produce a muddy midpoint; a neutral middle stop fixes this.
- Two stops are usually enough. Start simple and only add a third stop when you need to guide the eye to a specific part of the element.
- For a branded gradient, use a light tint and a dark shade of your primary color — the result stays cohesive across the whole UI.
Common mistakes
- Placing text on a high-contrast gradient without checking contrast at the midpoint — the middle is almost always the hardest area to pass WCAG.
- Too many color stops — each extra stop narrows the smooth transition zone and makes the result look striped rather than blended.
- Confusing angle directions — 0° is bottom-to-top, not left-to-right. Use 90° for a horizontal gradient.
Frequently asked questions
Can I apply a gradient to text?
Yes — set background-clip: text and -webkit-background-clip: text
on the element, then set color: transparent.
What's the difference between linear and radial?
Linear blends along a straight line at a set angle. Radial expands outward from a center point, which suits spotlight and glow effects.
Do CSS gradients work on borders?
Yes, with border-image: set border-image: linear-gradient(...) 1 and a solid border-width.
Alternatively, layer two backgrounds — one clipped to padding-box for the fill, one clipped to border-box for the gradient border — with a transparent border to reveal the bottom layer.
Gradients work well with other visual polish — use the Box Shadow Generator to add depth, or the Button Generator to style the element sitting on top.