Denne guide findes ikke på dit sprog endnu, så her er den på engelsk.
Kort fortalt
- A sunset gradient blends warm colours such as gold, orange and coral into pink, violet and a deep evening blue.
- In a real sunset, the sky runs from yellow and orange at the horizon through red and pink to violet and blue overhead.
- Blending blue straight into orange skips the pinks and violets in between and turns grey in the middle.
- Fading orange straight into black turns brown, so dusk gradients look better darkening through plum or indigo.
- Put text on the darker, upper part of a sunset gradient, where contrast with white type is highest.
På denne side
A sunset gradient blends warm colours, gold, orange and coral, into pink, violet and a deep evening blue. It is one of the most loved gradients in design because everyone recognises it and almost everyone likes it. It is also one of the easiest to get wrong. The secret is to follow the order the sky actually uses: warm and bright at the horizon, cooling through pink and violet as you look up. Skip those middle colours and the gradient turns grey.
The natural order of sunset colours
When the sun is low, its light travels through much more atmosphere to reach you. Along the way, air scatters blue light out of the direct beam, so the light near the sun arrives yellow, orange and red. Higher in the sky, away from the sun, more blue remains. The result is a band of colours stacked from the horizon upwards.
linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%)| Height in the sky | Colour | Example code |
|---|---|---|
| Overhead | Deep blue to indigo | #1e3a8a |
| Upper sky | Violet to mauve | #6d28d9 |
| Middle sky | Pink to magenta | #db2777 |
| Low sky | Orange to coral | #f97316 |
| Horizon | Gold to pale yellow | #fcd34d |
Sunset gradient palettes, with codes
These ten palettes all follow the sky's order, top to bottom. Some use the whole range; others take just the warm end or just the dusk.
Synthwave is the stylised, neon cousin of the real thing; vaporwave colours and retro gradients take that direction further.
Why sunset gradients go muddy, and how to fix them
There are two classic mistakes. The first is joining blue and orange directly. They are near opposites on the colour wheel, and a straight blend between them averages to grey in the middle. The sky never does this because it passes through violet and pink. The second is fading orange into black for a darker mood. Dark orange is brown, so the gradient reads as rust or mud rather than evening.
If you want fewer stops, blending in OKLCH helps: it keeps colours saturated through the middle of the blend. See OKLCH gradients in CSS and, for the theory, muddy gradients.
Where sunset gradients work
Sunsets carry a clear feeling: the end of the day, warmth, a little nostalgia. That makes them natural for some jobs and odd for others. A bright, full-range sunset suits summer events, travel, music and hospitality. A dusky, mostly violet version suits evening launches, podcasts and anything reflective. A warm-only version, gold into coral, suits food, drink and sale moments.
- Event posters and invitations: the colours say evening before the date does.
- Travel and hospitality: golden hour is the most photographed light there is, and people recognise it.
- Music covers and playlists: dusk palettes feel cinematic and a little wistful.
- Seasonal campaigns: a sunset that shifts cooler through autumn marks the season without new artwork.
Where they fit less well: serious finance, healthcare and anything that should feel neutral. The warmth reads as leisure. Sunset colours also sit firmly on the warm side of the wheel; warm and cool colours explains how temperature changes a design's mood.
How to build your own sunset gradient
- 1
Choose how much of the sky you want
The whole range for drama, only the warm end for energy, or only the dusk for calm.
- 2
Put warm at the bottom
Gold and orange belong near the horizon. Upside-down sunsets can work, but they read as stylised.
- 3
Never skip a neighbour
Between blue and orange, include violet and pink. Between orange and dark, include plum or indigo.
- 4
Give the warm band less room
In real skies, the brightest colours hug the horizon. Keeping them to the lower quarter makes the gradient feel natural.
- 5
Add grain
Long, smooth skies band easily. A fine noise layer keeps the blend smooth after compression.
Text on a sunset gradient
The top of a sunset gradient is dark and cool, perfect for white text. The bottom is bright and warm, perfect for dark text or for nothing at all. The middle, where pink meets orange, is the hardest place for either. Place headlines high and details low, or keep the words in one calm band.
Headline high in the darker sky, details lower down.
A story where the warm glow sits below the words.
.hero {
background-color: #1b1b3a;
background-image: radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%);
color: #ffffff;
}
.hero h1 {
/* keep the headline in the dark upper half */
margin-top: 12vh;
}For more sky and landscape palettes, see colour palettes from nature, and for pink-led versions, pink gradients.
Spørgsmål, folk stiller
What colours are in a sunset gradient?
Typically gold and orange at the horizon, then coral, pink and magenta, then violet and a deep blue overhead.
Why does my sunset gradient look muddy?
Usually because it blends blue straight into orange, or orange straight into black. Add violet and pink between blue and orange, and darken through plum or indigo instead of black.
What is the CSS code for a sunset gradient?
For a full sunset try linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%). Each palette on this page can be copied as CSS.
Where should text go on a sunset gradient?
In the darker, cooler upper part for white text, or in the pale warm band for dark text. Avoid the middle, where pink meets orange.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
