CSS gradient · linear · 90°
Sunset Gradient
Sunset is a ready-to-use CSS gradient with 2 color stops. Copy the CSS below, open it in the Gradient Maker to tweak the angle and stops, or click any stop color for its full breakdown.
linear · 90°
#F59E0B · 0%#EF4444 · 100%
CSS
background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);Other formats
--gradient-sunset: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);bg-[linear-gradient(90deg,_#f59e0b_0%,_#ef4444_100%)]Same colours, other shapes
The same stops passed through the other gradient functions — copy whichever suits the surface.
background: linear-gradient(270deg, #f59e0b 0%, #ef4444 100%);background: radial-gradient(circle, #f59e0b 0%, #ef4444 100%);background: conic-gradient(from 90deg, #f59e0b 0%, #ef4444 100%);Text on this gradient
White · 2.15:1 · worst case
Near-black · 5.02:1 · worst case
White · Below AANear-black · AA
Measured against every stop, near-black text holds a worst-case contrast of 5.02:1 on this gradient. Passes WCAG AA for body text (4.5:1).
Color stops
About this gradient
Sunset is a ready-to-use CSS gradient with 2 color stops. Copy the CSS below, open it in the Gradient Maker to tweak the angle and stops, or click any stop color for its full breakdown.