Advertise on WebGradients — reach designers & frontend developers.Learn more
#5271C4
#B19FFF
#ECA1FE

Linear CSS gradient

#157 Sleepless Night Gradient

Sleepless Night blends sky blue (#5271C4), lavender (#B19FFF), and lilac (#ECA1FE) in a soft linear CSS gradient across 3 colour stops.

The low-contrast softness makes this gradient versatile as a background layer — readable and soothing at the same time.

Works well for health and wellness apps, baby product sites, soft UI card backgrounds. Copy the CSS snippet below and apply it directly — no preprocessor or build step required.

Color palette

ColorHEXRGB
#5271C4rgb(82, 113, 196)
#B19FFFrgb(177, 159, 255)
#ECA1FErgb(236, 161, 254)

CSS code

background-image: linear-gradient(-225deg, #5271C4 0%, #B19FFF 48%, #ECA1FE 100%);

#157 Sleepless Night Gradient preview