Advertise on WebGradients — reach designers & frontend developers.Learn more
#EEA2A2
#BBC1BF
#57C6E1
#B49FDA
#7AC5D8

Linear CSS gradient

#044 Shy Rainbow Gradient

Shy Rainbow runs sweeping from left to right, blending blush pink (#EEA2A2), light gray (#BBC1BF), cyan (#57C6E1), lilac (#B49FDA), and cyan (#7AC5D8) in a smooth 5 colour stops linear CSS gradient.

The balanced colour range transitions cleanly, giving designers a flexible base that adapts to both light and dark surrounding palettes.

Works well for hero section backgrounds, marketing landing pages, UI card surfaces. Copy the CSS snippet below and apply it directly — no preprocessor or build step required.

Color palette

ColorHEXRGB
#EEA2A2rgb(238, 162, 162)
#BBC1BFrgb(187, 193, 191)
#57C6E1rgb(87, 198, 225)
#B49FDArgb(180, 159, 218)
#7AC5D8rgb(122, 197, 216)

CSS code

background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);

#044 Shy Rainbow Gradient preview