CSS Gradient Presets
24 gradients that are ready to paste. Every card shows the exact linear-gradient() value with its angle and hex stops — use them as they are, or open the gradient generator to change the stops and export your own.
Warm
Sunset
Coral into apricot — the default dusk blend for hero sections.
#FF7E5F · #FEB47B
Sunrise
Pale gold into peach, light enough to sit under dark type.
#F6D365 · #FDA085
Flame
Red into yellow at full chroma. Loud on purpose; use it small.
#F83600 · #F9D423
Peach Cream
Three-stop pastel blend for cards and empty states.
#FFE29F · #FFA99F · #FF719A
Ember
Deep maroon lifting into orange — a dark header that stays warm.
#7F1D1D · #F97316
Amber Glow
Two neighbouring golds, subtle enough for buttons.
#FFB347 · #FFCC33
Cool
Ocean
Midnight blue into cyan: the default tech gradient.
#2E3192 · #1BFFFF
Mint Fresh
Green-teal into deep blue, calm enough for long forms.
#43CEA2 · #185A9D
Arctic
Two near-white blues so a page background is never flat white.
#E0EAFC · #CFDEF3
Electric
Blue into violet at high chroma — the SaaS hero standard.
#4776E6 · #8E54E9
Deep Sea
Three dark teals for premium dark UI surfaces.
#0F2027 · #203A43 · #2C5364
Ice
Steel blue into pale cyan, a cold accent for charts and tags.
#83A4D4 · #B6FBFF
Purple & pink
Violet Dream
Violet into magenta — bold, but comfortable as a full hero.
#7C3AED · #EC4899
Grape
Purple into blue: a friendlier alternative to plain blue.
#6A11CB · #2575FC
Cotton Candy
Warm peach into pink, soft enough for avatars and empty states.
#FFC3A0 · #FFAFBD
Magenta Heat
Deliberately loud pink into yellow for sale banners.
#FF1361 · #FFF800
Lavender
Sand into rose: a warm neutral that still reads as color.
#EECDA3 · #EF629F
Orchid
Two violets, so a single-hue gradient keeps its depth.
#DA22FF · #9733EE
Neutral & green
Graphite
Near-black greys for dark headers with barely any hue.
#232526 · #414345
Silver
Light grey into slate, readable behind both light and dark text.
#BDC3C7 · #2C3E50
Rainforest
Deep teal into leaf green for eco and wellness brands.
#134E5E · #71B280
Lime Soda
Two greens from one family — a natural fit for progress bars.
#A8E063 · #56AB2F
Sand
Paper into clay: warm and quiet enough for editorial backgrounds.
#F2E6CD · #D9B382
Olive
Olive into light lime, an earthy alternative to plain green.
#636B2F · #B5C055
A CSS gradient is a background image the browser draws from a list of color stops, which makes it resolution-independent and cheap to ship. Every preset here uses linear-gradient() with an explicit angle: 0deg points up, 90deg right and 180deg down. Copy the value, or swap the hex stops for your own colors and keep the geometry.
Frequently asked questions
Set it as a background image rather than a background color: background: linear-gradient(135deg, #7C3AED, #EC4899);. Any element that accepts a background can take it.
Good to know
- 24 presets across 4 color families, all copy-pasteable.
- The same values work as a Tailwind arbitrary background or an inline style.
- Use the gradient generator to change stops, angle or gradient type and export the CSS.
Build your own gradient
Change the stops and angle, then export the CSS — or blend two colors first with the color mixer.
Guides for Gradient Generator
Longer reads for the questions that come up around gradient generator.
