CSS Gradient Generator

What Is a CSS Gradient?

A CSS gradient is a smooth transition between two or more colors, generated directly by the browser (no image file needed) using the linear-gradient() or radial-gradient() functions.

Why Use This Tool?

Getting a multi-stop gradient's angle and color-stop percentages right by typing CSS from scratch is fiddly - this tool lets you see the result update live as you adjust each value.

How to Use It

1. Choose linear or radial.
2. Add color stops and adjust their position.
3. For linear gradients, set the angle.
4. Copy the generated CSS background declaration.

Limitations

This covers standard linear and radial gradients - conic gradients and more advanced multi-layer gradient combinations aren't generated here.

Examples

/* Diagonal brand gradient */
background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);

/* Soft spotlight */
background: radial-gradient(circle at 30% 20%, #60a5fa, #1e3a8a);

/* Hard stripes: two stops at the same position */
background: linear-gradient(90deg, #111 50%, #fff 50%);

How the Angle Works

0deg points up, 90deg points right and 180deg (the default) points down. Keywords work too: to right, to bottom right. The gradient runs towards that direction.

Tips for Good-Looking Gradients

• Stay within nearby hues (blue to purple) for a smooth blend; opposite colours can look muddy grey in the middle.
• Add a middle stop to control the transition instead of accepting the default halfway blend.
• Check text contrast on top of the lightest part of the gradient.
• Put a solid background-color first as a fallback.
• For text, use background-clip: text with color: transparent.

Pick matching colours with the CSS Color Palette Generator, add depth with the Box Shadow Generator, and read the CSS gradients guide.