Gradient Backgrounds
200 beautiful CSS gradients — click any card to copy the code.
How to Use
- Filter — Pick a color category to narrow the gallery.
- Click to copy — Click any card to copy the full CSS background property.
- Paste — Add it directly to your stylesheet:
background: linear-gradient(...); - Customize — Use our CSS Gradient Generator to tweak colors, angle, and stops.
What Are CSS Gradients?
CSS gradients create smooth color transitions without image files. They're defined with linear-gradient(), radial-gradient(), or conic-gradient().
All gradients here use linear-gradient(135deg, ...) — a diagonal direction that works great for hero backgrounds, cards, and UI accents. Change the angle to any value from 0° to 360°.
Common Use Cases
Tips & Best Practices
Always test text on gradients with our Contrast Checker. The darkest part sets minimum contrast.
Apply gradients to text with background-clip: text; -webkit-background-clip: text; color: transparent;
These use 135deg. Try 90deg for top-to-bottom or 45deg for a sharper diagonal — same colors, different feel.
Gradients can't transition directly — instead animate background-position on an oversized gradient background.
Frequently Asked Questions
Can I use these gradients for free?
Yes. All gradients here are CSS code you generate locally — no licensing applies.
How do I apply a gradient to the full page?
Set it on body: body { min-height: 100vh; background: linear-gradient(...); }
How do I use a gradient as a text fill?
Wrap text in a span: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
What is the difference between linear and radial gradients?
Linear gradients flow in a straight line. Radial gradients emit from a center point outward in a circle or ellipse. Use radial-gradient(circle, ...) for spotlight effects.