Skip to main content
CSSTools.io
Home
Gradient
Box Shadow
Glassmorphism
Gradients
Blog
English
Español
Português
日本語
한국어
简体中文
Français
🌙
☀️
50 Curated Gradients
CSS
Gradient Collection
50 beautiful, hand-picked CSS gradients ready to use in your projects.
All
Warm
Cool
Vibrant
Pastel
Dark
Nature
Sunset Blaze
#ff6b35 → #f7c948 → #ff3864
Copy CSS
Open in Editor →
Ocean Breeze
#0077b6 → #00b4d8 → #90e0ef
Copy CSS
Open in Editor →
Northern Lights
#00f5d4 → #7b2ff7 → #f15bb5
Copy CSS
Open in Editor →
Rose Garden
#ff6b6b → #ffa8a8 → #fff5f5
Copy CSS
Open in Editor →
Midnight City
#0f0c29 → #302b63 → #24243e
Copy CSS
Open in Editor →
Tropical Paradise
#11998e → #38ef7d
Copy CSS
Open in Editor →
Candy Floss
#e0c3fc → #8ec5fc
Copy CSS
Open in Editor →
Fire Opal
#ea5455 → #feb692
Copy CSS
Open in Editor →
Arctic Frost
#e0eafc → #cfdef3
Copy CSS
Open in Editor →
Purple Haze
#7f00ff → #e100ff
Copy CSS
Open in Editor →
Golden Hour
#f09819 → #edde5d
Copy CSS
Open in Editor →
Deep Sea
#1a2980 → #26d0ce
Copy CSS
Open in Editor →
Lavender Dream
#c9d6ff → #e2e2e2
Copy CSS
Open in Editor →
Neon Tokyo
#f72585 → #7209b7 → #3a0ca3
Copy CSS
Open in Editor →
Forest Canopy
#134e5e → #71b280
Copy CSS
Open in Editor →
Peach Sorbet
#ffecd2 → #fcb69f
Copy CSS
Open in Editor →
Electric Violet
#4776e6 → #8e54e9
Copy CSS
Open in Editor →
Cherry Blossom
#fbc2eb → #a6c1ee
Copy CSS
Open in Editor →
Sahara Dust
#d4a574 → #c2956b → #a67c52
Copy CSS
Open in Editor →
Cyber Grape
#7f5a83 → #0d324d
Copy CSS
Open in Editor →
Morning Dew
#89f7fe → #66a6ff
Copy CSS
Open in Editor →
Coral Reef
#ff9a9e → #fecfef → #fdfcfb
Copy CSS
Open in Editor →
Space Odyssey
#000428 → #004e92
Copy CSS
Open in Editor →
Lime Fresh
#a8e063 → #56ab2f
Copy CSS
Open in Editor →
Velvet Wine
#843b62 → #621940
Copy CSS
Open in Editor →
Aqua Splash
#13547a → #80d0c7
Copy CSS
Open in Editor →
Mango Tango
#ffe259 → #ffa751
Copy CSS
Open in Editor →
Blueberry Cream
#4568dc → #b06ab3
Copy CSS
Open in Editor →
Mint Chocolate
#44a08d → #093637
Copy CSS
Open in Editor →
Flamingo Pink
#f953c6 → #b91d73
Copy CSS
Open in Editor →
Storm Cloud
#373b44 → #4286f4
Copy CSS
Open in Editor →
Honey Glow
#f7971e → #ffd200
Copy CSS
Open in Editor →
Twilight Sky
#141e30 → #243b55
Copy CSS
Open in Editor →
Watermelon Sugar
#ff4b5c → #ff8a5c → #ffd56b
Copy CSS
Open in Editor →
Ice Crystal
#76b2fe → #b69efe
Copy CSS
Open in Editor →
Bamboo Grove
#7f7fd5 → #86a8e7 → #91eac9
Copy CSS
Open in Editor →
Lava Flow
#f12711 → #f5af19
Copy CSS
Open in Editor →
Moonlit Path
#2c3e50 → #4ca1af
Copy CSS
Open in Editor →
Sakura Pink
#e8cbc0 → #636fa4
Copy CSS
Open in Editor →
Aurora Green
#43c6ac → #191654
Copy CSS
Open in Editor →
Desert Sun
#ee9ca7 → #ffdde1
Copy CSS
Open in Editor →
Royal Purple
#6a3093 → #a044ff
Copy CSS
Open in Editor →
Sea Foam
#3a7bd5 → #3a6073
Copy CSS
Open in Editor →
Cotton Candy
#d4fc79 → #96e6a1
Copy CSS
Open in Editor →
Volcanic Ash
#3d3d3d → #1a1a2e → #16213e
Copy CSS
Open in Editor →
Summer Breeze
#ffc3a0 → #ffafbd
Copy CSS
Open in Editor →
Cosmic Fusion
#ff0099 → #493240
Copy CSS
Open in Editor →
Jade Temple
#0b8793 → #360033
Copy CSS
Open in Editor →
Sunrise Glow
#f83600 → #f9d423
Copy CSS
Open in Editor →
Blue Lagoon
#43cea2 → #185a9d
Copy CSS
Open in Editor →