Reference

CSS Gradients

Named gradients with the background: linear-gradient() code ready to copy, the exact color stops behind each one, and radial and conic variants. 54 gradients, grouped by the color family they lean on.

#B3E5FC#E1F5FE Polar Ice 2 #2C3E50#4CA1AF Ocean Drift 2 #1F4E79#2E8B99 Deep Current 2 #2193B0#6DD5ED Azure Drift 2 #0F2027#203A43#2C5364 Midnight Tide 3 #6E8FD8#AEC6F0 Cornflower Haze 2 #1A2980#26D0CE Sapphire Fall 2 #E6F0FA#C4D9EE Winter Sky 2 #7B2FF7#9D50BB#E100FF Aurora Dream 3 #E0C3FC#8EC5FC Lavender Cloud 2 #41295A#2F0743 Amethyst Dusk 2 #A18CD1#FBC2EB Orchid Bloom 2 #6A11CB#2575FC Violet Current 2 #42275A#734B6D Plum Velvet 2 #F4C4CE#FBE7DE Rose Dream 2 #F857A6#FF5858 Flamingo Flush 2 #FFDDE1#EE9CA7 Blush Fade 2 #EE0979#FF6A00 Magenta Pop 2 #FF9A9E#FAD0C4 Candy Ribbon 2 #C2185B#4A148C Fuchsia Night 2 #FBC2EB#A6C1EE Cotton Candy 2 #1C7C8C#7FD8BE Sea Whisper 2 #B8F2E6#AED9E0 Mint Fizz 2 #43C6AC#191654 Lagoon 2 #11998E#38EF7D Turquoise Shore 2 #D9F3F0#A8DADC Glacier Melt 2 #43CEA2#185A9D Northern Lights 2 #2E5E4E#A8E6C9 Forest Canopy 2 #DCE9D5#A9C9A4 Garden Sage 2 #A8FF78#78FFD6 Lime Spark 2 #093028#237A57 Emerald Deep 2 #C2E59C#64B3F4 Meadow Morning 2 #FFCF71#FF9A44#FC6076 Golden Hour 3 #F7971E#FFD200 Amber Glow 2 #FF512F#DD2476 Sunset Boulevard 2 #FFE0C2#FFC3A0 Peach Sorbet 2 #F6D365#FDA085 Honey Drizzle 2 #FF6A00#EE0979 Tangerine Burst 2 #F9F586#F6D365 Lemon Bloom 2 #EACDA3#D6AE7B Desert Noon 2 #641E16#E74C3C Ember 2 #870000#190A05 Crimson Veil 2 #FF416C#FF4B2B Poppy Field 2 #3E2723#8D6E63 Autumn Fallen 2 #C79081#DFA579 Caramel Drift 2 #603813#B29F94 Rosewood 2 #3A4A6B#B0B8D0 Storm Satin 2 #64748B#CBD5E1 Slate Mono 2 #E8EBEF#C4CBD4 Silver Shine 2 #232526#414345 Graphite Fade 2 #000000#434343 Obsidian 2 #2B2E4A#14152A Dusk Sky 2 #FFFFFF#ECECEC Paper White 2 #F5F7FA#C3CFE2 Frost Veil 2

Want a gradient that isn’t here? Build one from scratch, set the angle and stops, and copy the CSS.

Open the Gradient Generator →