Gradients

Overview

SDS provides a set of pre-defined gradients that can be applied as backgrounds. Each gradient is exposed as a CSS custom property (--gradient-*) and as a modifier class (--gradient-*).

Gradients are grouped by mood: warm, cool, natural, and neutral.

Applying gradients

Apply a gradient by adding the corresponding modifier class to a supporting component:

Sunrise gradient on a hero banner

html

Copy

Demo controls

Or reference the CSS custom property directly:

.my-surface {
  background-image: var(--gradient-aurora);
}

Gradient swatches

Warm

Sunrise

--gradient-sunrise

Ember

--gradient-ember

Sunset

--gradient-sunset

Coral

--gradient-coral

Wine

--gradient-wine

Cool

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