CSS Gradient Generator

Create CSS gradients using linear interpolation

Gradient Settings
°
Preview

Related CSS Tools

What are CSS Gradients?

CSS gradients let you display smooth transitions between colors. Linear gradients follow a straight line (angle or direction). Radial gradients radiate from a center point. Both can have multiple color stops at different positions, creating complex effects without images.

Frequently Asked Questions

What's the difference between to bottom and 180deg?
They're the same! 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left. Use whichever is clearer in your code.
Can I use gradients in borders?
Yes! Use border-image with gradient. Example: border-image: linear-gradient(red, blue) 1; This creates gradient borders, though syntax is more complex than backgrounds.
How do I create repeating gradients?
Use repeating-linear-gradient() or repeating-radial-gradient(). They repeat the pattern based on the last color stop position. Great for stripes and patterns.