CSS Gradient
Sunrise Gradient
This sunrise gradient captures the soft, hopeful light of early morning. It blends delicate pink through warm peach to a clean sky blue. Use it for landing pages, onboarding screens, or any design that should feel fresh and optimistic.
CSS
background: linear-gradient(135deg, #fbc2eb 0%, #ffecd2 50%, #a6c1ee 100%);Color Stops
#FBC2EB
#FFECD2
#A6C1EE
Frequently Asked Questions
›What colors make up this sunrise gradient?
The gradient uses three stops: a soft pink (#FBC2EB), warm peach (#FFECD2), and light periwinkle blue (#A6C1EE).
›Is this gradient accessible for text?
Light gradients like this work best as backgrounds with dark text overlay. Use a dark color like #2B2D42 or #1A1A2E for text to ensure WCAG AA contrast compliance.
›Can I make this gradient animate?
Yes. Use CSS animation with background-size: 200% 200% and animate background-position. This creates a subtle, living gradient effect. Search for 'animated gradient CSS' for code snippets.
sunrise gradientsunrise gradient csspink peach gradientmorning gradientsoft warm gradient