Gradient Library

240+ Curated CSS Gradients

Copy-paste ready gradients for buttons, hero sections, cards, and backgrounds. Click any gradient to copy its CSS.

Sunset & Warm 20

Ocean & Cool 20

Purple & Violet 20

Green & Nature 20

Dark & Dramatic 20

Neon & Vibrant 20

Pastel & Soft 20

Metallic & Gold 20

Pink & Rose 20

Blue Gradient 20

Fire & Heat 20

Midnight & Space 20

Using CSS Gradients in Your Designs

CSS gradients are created with the background property using linear-gradient() or radial-gradient(). They're lightweight, resolution-independent, and infinitely customizable.

Click any gradient above to copy its CSS. Then paste it into your stylesheet: background: linear-gradient(...);

For more control, use our Gradient Generator to create custom multi-stop gradients with angle control and live preview.

Skip to content