Developer Tools

CSS Gradient
Generator

Q: How do I use the generated gradient?

Copy the CSS and paste it as the background (or background-image) property of any element. For example: .hero { background: linear-gradient(135deg, #4ade80, #2563eb); }.

Q: What does the angle control?

The angle sets the direction of a linear gradient. 0deg goes bottom-to-top, 90deg left-to-right, and 135deg is a common top-left to bottom-right diagonal.

Design linear and radial CSS gradients with a live preview. Tune colors, angle and stops, then copy production-ready background CSS.

Live preview

Angle & stops

Copy CSS

background:
linear-gradient(
135deg,
#4ade80, #2563eb);

Frequently Asked Questions

How do I use the generated gradient?

Copy the CSS and paste it as the background (or background-image) property of any element. For example: .hero { background: linear-gradient(135deg, #4ade80, #2563eb); }.

What is the difference between linear and radial gradients?

A linear gradient blends colors along a straight line at a chosen angle. A radial gradient blends outward from a center point in a circle or ellipse.

What does the angle control?

The angle sets the direction of a linear gradient. 0deg goes bottom-to-top, 90deg left-to-right, and 135deg is a common top-left to bottom-right diagonal.

Are CSS gradients good for performance?

Yes. Gradients are rendered by the browser with no image download, so they are sharp at any resolution and lighter than background images.