Sunset fade The quick brown fox jumps over the lazy dog

Sunset fade

Linear · 90° · 2 stops · added 2 hours ago

Edit

Colour stops

CSS

CSS
background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%);
With fallback
background-color: #3B82F6;
background-image: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%);
CSS variable
--sunset-fade: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%);

Download as an image

A PNG of the gradient, e.g. for wallpapers, slides or social posts.

Text on this gradient

Checked at every colour in it: text is only as readable as the gradient's lowest-contrast point.

Aa White text on Sunset fade
3.52:1 lowest, at #EC4899
  • AA · normal text 4.5:1 Fail
  • AA · large text 3:1 Pass
  • AAA · normal text 7:1 Fail
  • AAA · large text 4.5:1 Fail
  • Graphics & UI 3:1 Pass
Aa Black text on Sunset fade
5.70:1 lowest, at #3B82F6
  • AA · normal text 4.5:1 Pass
  • AA · large text 3:1 Pass
  • AAA · normal text 7:1 Fail
  • AAA · large text 4.5:1 Pass
  • Graphics & UI 3:1 Pass

Other styles

The same colours in each style. Open one in the editor to save it.