CSS Gradient
Sunset Gradient
Capture the warmth of golden hour with this sunset gradient. It transitions from fiery orange through soft pink to a deep twilight blue, creating a dramatic and warm backdrop. Perfect for hero sections, cards, and any design that needs to feel warm and inviting.
CSS
background: linear-gradient(135deg, #ff6b35 0%, #f7c59f 50%, #2b2d42 100%);Color Stops
#FF6B35
#F7C59F
#2B2D42
Frequently Asked Questions
›How do I use this sunset gradient in CSS?
Copy the CSS code and apply it as a background property: background: linear-gradient(135deg, #ff6b35 0%, #f7c59f 50%, #2b2d42 100%). It works on any element.
›Can I change the direction of the gradient?
Yes. Replace '135deg' with any angle (0deg is bottom-to-top, 90deg is left-to-right) or use keywords like 'to right', 'to bottom left', etc.
›How do I add this gradient to Tailwind CSS?
Add a custom utility in your tailwind.config: extend: { backgroundImage: { 'sunset': 'linear-gradient(135deg, #ff6b35 0%, #f7c59f 50%, #2b2d42 100%)' } }. Then use bg-sunset.
sunset gradientsunset gradient cssorange pink gradientsunset color gradientwarm gradient css