Sunrise gradient
A sunrise gradient is the sunset's quieter sibling: the same warm-below-cool structure the sky always produces, but through cleaner air. Overnight the dust and haze settle, so dawn colors run paler and clearer, peach and soft gold where the evening had saturated rose. The difference between the two is atmosphere, and it survives all the way into a CSS blend.
5sunrise gradients, ready to use
These start lighter than any sunset pairing, cream and pale gold at the base, and they stay vertical because dawn is a horizon event. First light is the definitive version. Break of day is the one that includes the leftover night at the top, which is what a real daybreak looks like, and morning haze is the barely-there wash for backgrounds that should only whisper morning.
Break of day
linear-gradient(180deg, #31487A, #FFB3C6, #FFE5B4)
Night still at the top, morning at the base, which is the minute a real daybreak occupies.
Common questions
- What colors are in a sunrise gradient?
- Pale gold and peach low, soft pink through the middle, and, in the fuller versions, a remnant of night blue at the top. Dawn light is filtered through cleaner air than dusk, so keeping every stop a shade paler than its sunset cousin is what makes the result read as morning.
- Should a sunrise gradient be lighter than a sunset one?
- Yes, and it is the entire distinction. The structure is identical, warm at the horizon and cool above, so saturation carries the meaning: full-strength rose and violet read as evening, cream and pale peach read as dawn. Take any sunset pairing and lift both stops toward white and it becomes a sunrise.
- Where do sunrise gradients work best?
- Anywhere the message is a beginning: onboarding flows, morning-routine and wellness contexts, empty states that should feel hopeful rather than blank. They hold dark text better than sunsets do, since most of the surface is pale, which makes them one of the few scenic gradients that work behind paragraphs.