Sunset gradient: gold, coral and violet CSS backgrounds
This sunset gradient fades from warm gold (#FFCF70) through coral (#FF6B6B) to dusk violet (#574B90) at 180°. Copy the CSS or download a PNG. Use dark text on the gold and coral part and white text on the violet part; no single text color works across all of it.
background-color: #ffcf70;
background-image: linear-gradient(180deg, #ffcf70 0%, #ff6b6b 50%, #574b90 100%);Variations
Reversed
#574B90 → #FF6B6B → #FFCF70Softer
#FFE0A2 → #FF9F9F → #928AB7Deeper
#A68749 → #A64646 → #39315ERadial glow
#FFCF70 → #FF6B6B → #574B90
On this page
A sunset sky moves from warm light near the horizon to cool dark higher up, and this gradient copies that order from top to bottom: gold, coral, then a muted violet. It suits party invitations, travel posts, music covers and phone wallpapers, anywhere you want a glow instead of a flat fill.
Why there are three stops
Gold (#FFCF70) and violet (#574B90) sit on opposite sides of the color wheel. If you blend only those two, the browser passes through the middle of the RGB cube and arrives at #AB8D80, a dusty taupe that looks muddy. The coral stop (#FF6B6B) in the middle keeps the blend bright and warm for most of the height, and lets the violet arrive only at the bottom.
The CSS is linear-gradient(180deg, #ffcf70 0%, #ff6b6b 50%, #574b90 100%). The gold is closest to CSS khaki and gold, the coral to tomato and salmon, and the violet to darkslateblue. None is an exact match, so use the hex codes rather than the names.
Text on a sunset gradient
Because the stops range from very light to fairly dark, the best text color changes down the gradient:
- Gold: black gives 14.41:1, white only 1.45:1.
- Coral: black gives 7.56:1, white 2.77:1.
- Violet: white gives 7.46:1, black 2.81:1.
So dark text belongs in the top two thirds and white text in the bottom part. Do not run one line of text across the boundary where the two switch. The Deeper variation shades each stop 35% toward black, giving #A68749, #A64646 and #39315E, and white then measures 3.39:1, 5.85:1 and 11.83:1. That is usable for large white headlines everywhere and for small text on the lower two stops.
Worked example
You are making a square Instagram post for a rooftop party. Pick Square post 1080 × 1080, keep the 180° angle, and press Download PNG. In your design app, set the event name in black at the top, where the gold gives 14.41:1, and the street address and time in white across the bottom third, where the violet gives 7.46:1. Leave the coral middle empty or place a simple sun-shaped circle there. If you want the whole post softer for a daytime brunch, the Softer variation gives #FFE0A2, #FF9F9F and #928AB7, and black text works comfortably on all three.
Related ideas
For the solid colors that match this sunset, see the sunset color palettes. To warm the look further, compare the orange gradient, or use the gradient generator to enter your own sky colors.