Pre-defined gradient backgrounds for banners and other surfaces.
Overview
SDS provides named multi-color gradients and single-color gradients that fade to transparent. Named gradients are exposed as CSS custom properties and modifier classes. Every --color-* modifier also has a corresponding --gradient-* modifier class.
Feature gradients are grouped by mood: warm, cool, natural, and neutral.
Feature gradients
Warm
Sunrise
--gradient-sunrise
Ember
--gradient-ember
Sunset
--gradient-sunset
Coral
--gradient-coral
Wine
--gradient-wine
Cool
Dawn
--gradient-dawn
Twilight
--gradient-twilight
Dusk
--gradient-dusk
Lavender
--gradient-lavender
Midnight
--gradient-midnight
Aurora
--gradient-aurora
Slate
--gradient-slate
Arctic
--gradient-arctic
Natural
Ocean
--gradient-ocean
Moss
--gradient-moss
Forest
--gradient-forest
Neutral
Ash
--gradient-ash
Steel
--gradient-steel
Color gradients
Every SDS color has a corresponding gradient. The Celeste family demonstrates the available named variants:
Celeste
Dim
--gradient-celeste-dim
Darkest
--gradient-celeste-darkest
Darker
--gradient-celeste-darker
Dark
--gradient-celeste-dark
Shade
--gradient-celeste-shade
Celeste
--gradient-celeste
Tint
--gradient-celeste-tint
Light
--gradient-celeste-light
Lighter
--gradient-celeste-lighter
Lightest
--gradient-celeste-lightest
Bright
--gradient-celeste-bright
Gradient direction
Gradient utility classes use 165deg by default. Append -to-right, -to-left, -to-top, or -to-bottom to direct any utility gradient without defining a separate gradient.
Directional gradient utilities
html
Copy
Demo controls
Direction suffixes apply to utility classes. A named gradient CSS custom property, such as --gradient-sunrise, retains the default 165deg direction.
Examples
ds-banner
Apply a gradient by adding the corresponding modifier class to a supporting component: