Production gradients

Gradients

Gradient recipes for backgrounds, charts, badges, and expressive interface moments.

Recipes

Formats

CSS

Best for

Web UI

These gradients are built with controlled hue movement and clear stop positions, so they stay usable across light and dark surfaces.

Curated Resources

Aurora Lesson

linear-gradient(135deg, #ECFEFF 0%, #EEF2FF 52%, #FFF7ED 100%)

Soft teaching-page background that keeps black text readable on top.

Color values

#ECFEFF

#EEF2FF

#FFF7ED

Signal Button

linear-gradient(120deg, #2563EB 0%, #7C3AED 55%, #E11D48 100%)

Compact call-to-action gradient with strong edge contrast.

Color values

#2563EB

#7C3AED

#E11D48

Data Heat

linear-gradient(90deg, #DBEAFE 0%, #38BDF8 45%, #DC2626 100%)

Sequential ramp for visualizing increasing intensity without hard color jumps.

Color values

#DBEAFE

#38BDF8

#DC2626

Calm Header

radial-gradient(circle at top left, #CCFBF1 0%, #F8FAFC 50%, #E0E7FF 100%)

Low-saturation header wash for documentation and resource indexes.

Color values

#CCFBF1

#F8FAFC

#E0E7FF

Best Practices

Use gradients for large surfaces only when the foreground color has been tested at the lightest stop.
Avoid placing small text over high-chroma transitions; use a solid overlay or quiet section of the gradient.
Define color stops deliberately so the focal color appears where the component needs emphasis.

Related Tools