BoldLinear · 2 stops
Sunset CSS gradients
Browse sunset CSS gradients that move between gold, orange, coral, pink and magenta, with linear and radial examples. These 24 selected examples come from the existing gradient library.
Use this gradient.
A sunset blend suits a hero panel, a card header or an illustration sky. Keep the brighter end away from small text and let a solid surface carry paragraphs.
Text over gradients.
The gold end of a sunset blend is much lighter than the magenta end, so one text colour rarely works across the whole area. Check the label against the lightest and darkest regions it covers.
CSS for Ruby & Ochre
background: linear-gradient(135deg, #BE8A13 0%, #D42D6E 100%);
background: linear-gradient(135deg in oklab, #BE8A13 0%, #D42D6E 100%);The first declaration supplies an sRGB fallback; the second interpolates in OKLab. Create a gradient with your own colours and stops.