Sunset gradient
A sunset gradient goes from a deep violet or navy sky through magenta and coral to a warm orange or gold horizon. Keep the dark end at the top and the warm end at the bottom, the way the real sky looks. Below are 12 sunset gradients — copy the CSS, download a PNG, or open one in the editor.
Quick copy — sunset classic:
background: linear-gradient(180deg, #412871 0%, #4c2a77 4.2%, #582b7c 8.3%, #652d80 12.5%, #712e83 16.7%, #7e2f85 20.8%, #8b3086 25%, #983185 29.2%, #a63284 33.3%, #b33381 37.5%, #c0347d 41.7%, #cd3677 45.8%, #da3870 50%, #e0416b 54.2%, #e54a66 58.3%, #ea5361 62.5%, #ee5d5d 66.7%, #f26659 70.8%, #f56f56 75%, #f87853 79.2%, #fa8152 83.3%, #fc8b51 87.5%, #fe9452 91.7%, #fe9d54 95.8%, #ffa658 100%);
background: linear-gradient(in oklch 180deg, #412871 0%, #da3870 50%, #ffa658 100%);- Aa · 1.9:1
White text: Fails AA — no plain text
- Aa · 3.6:1
Black text: Fails AA — large text only (3:1)
- Aa · 3.1:1
White text: Fails AA — large text only (3:1)
- Aa · 4.6:1
Black text: Passes AA
- Aa · 8.0:1
Black text: Passes AA
- Aa · 2.3:1
Black text: Fails AA — no plain text
- Aa · 3.0:1
Black text: Fails AA — no plain text
- Aa · 1.9:1
Black text: Fails AA — no plain text
- Aa · 1.4:1
Black text: Fails AA — no plain text
- Aa · 1.9:1
Black text: Fails AA — no plain text
- Aa · 6.0:1
Black text: Passes AA
- Aa · 3.9:1
White text: Fails AA — large text only (3:1)
Using sunset gradients well
Good for: travel and hospitality heroes, music and event posters, wellness apps, evening or night-mode themes.
Pairing: Sunsets already span cool to warm, so add one neutral: a deep navy for text panels or a plain white for cards. A thin dark silhouette layer (hills, a skyline) sells the effect.
Readable text: White text reads well over the violet and magenta band; the orange and gold horizon usually needs dark text or a scrim. Check the worst point with the ratio on each swatch. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.
These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.
Questions
What is the CSS code for a sunset gradient?
A simple sunset gradient is background: linear-gradient(in oklch 180deg, #412871 0%, #da3870 50%, #ffa658 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.
What colours go well with sunset in a gradient?
Sunsets already span cool to warm, so add one neutral: a deep navy for text panels or a plain white for cards. A thin dark silhouette layer (hills, a skyline) sells the effect.
What text colour is readable on a sunset gradient?
White text reads well over the violet and magenta band; the orange and gold horizon usually needs dark text or a scrim. Check the worst point with the ratio on each swatch. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.
How do I download a sunset gradient image?
Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.
Where are sunset gradients typically used?
Common uses: travel and hospitality heroes, music and event posters, wellness apps, evening or night-mode themes.