Advertise on WebGradients — reach designers & frontend developers.Learn more
#E4AFCB
#B8CBB8
#E2C58B
#C2CE9C
#7EDBDC

Linear CSS gradient

#037 Old Hat Gradient

A soft linear CSS gradient sweeping from left to right, Old Hat blends rose (#E4AFCB), mint (#B8CBB8), orange (#E2C58B), golden yellow (#C2CE9C), and teal (#7EDBDC) in 5 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
#E4AFCBrgb(228, 175, 203)
#B8CBB8rgb(184, 203, 184)
#E2C58Brgb(226, 197, 139)
#C2CE9Crgb(194, 206, 156)
#7EDBDCrgb(126, 219, 220)

CSS code

background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);

#037 Old Hat Gradient preview