TCC Color Box

Gradient Collections

Beautiful gradient collections with 60+ professional gradients across 6 categories. Click any gradient to copy its CSS, or use the copy buttons for Tailwind classes.

60+ Gradients
6 Categories
CSS Ready

Popular Gradients

15 stunning gradients ready for your projects

Click to copy

Ocean Blue

45° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Sunset

90° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Fresh Green

135° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Purple Rain

180° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Fire Orange

45° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Cool Blues

90° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color

Modern Gradients

12 stunning gradients ready for your projects

Click to copy

Digital Dreams

45° • 3 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Neon Nights

135° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Tech Vibes

90° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Corporate Blue

180° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Gradient Flow

45° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Electric Pulse

135° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color

Nature Inspired

12 stunning gradients ready for your projects

Click to copy

Forest Mist

45° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Ocean Waves

90° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Autumn Leaves

135° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Mountain Sunset

180° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Spring Meadow

45° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Desert Sunrise

90° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color

Sunset Collection

8 stunning gradients ready for your projects

Click to copy

Golden Sunset

45° • 3 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Tropical Sunset

90° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Desert Evening

135° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Malibu Sunset

180° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Miami Vice

45° • 3 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

California Dream

90° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color

Cosmic & Space

8 stunning gradients ready for your projects

Click to copy

Galaxy Far Away

45° • 3 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Nebula Cloud

90° • 3 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Starlight

135° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Deep Space

180° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Aurora Borealis

45° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color
Click to copy

Cosmic Dust

90° • 2 colors

CSS
Tailwind
NOTE: HEX value may differ from the default Tailwind color