Tailwind Gradient CSS Generator

Create beautiful gradients effortlessly with our Tailwind Gradient CSS Generator. Copy Tailwind or normal CSS and download gradients as SVG files.

Sample Gradients

Blue 900 → Blue 300

Green 800 → Green 600 → Green 400

Orange 700 → Orange 500 → Orange 300

Purple 900 → Purple 600 → Purple 300

Red 800 → Red 600 → Red 400

Teal 700 → Teal 500 → Teal 300

Pink 700 → Pink 500 → Pink 300

Gray 800 → Gray 600 → Gray 400

Indigo 900 → Indigo 600 → Indigo 300

Yellow 400 → Yellow 200

Cyan 700 → Cyan 500 → Cyan 300

Lime 700 → Lime 500 → Lime 300

Amber 700 → Amber 500 → Amber 300

Emerald 500 → Emerald 900

Fuchsia 700 → Fuchsia 500 → Fuchsia 300

Rose 700 → Rose 500 → Rose 300

Violet 800 → Violet 600 → Violet 400

Sky 700 → Sky 500 → Sky 300

Slate 300 → Slate 500

Stone 700 → Stone 500 → Stone 300