Shadow

Adjust the size and location of an element's drop shadow

Properties

Utility class	X-offset	Y-offset	Blur radius	Spread radius	Color (rgba)
.shadow-none	—	—	—	—	none
.shadow-1	0px	1px	4px	0px	(0, 0, 0, 0.1)
.shadow-2	0px	4px	8px	0px	(0, 0, 0, 0.1)
.shadow-3	0px	8px	16px	0px	(0, 0, 0, 0.1)
.shadow-4	0px	12px	24px	0px	(0, 0, 0, 0.1)
.shadow-5	0px	16px	32px	0px	(0, 0, 0, 0.1)

Property descriptions

Shadow parameters

offset-x: horizontal shift (positive = right, negative = left)
offset-y: vertical shift (positive = down, negative = up)
blur-radius: how blurry/soft the shadow edge is (larger = softer)
spread-radius: expands (+) or contracts (−) the shadow size
color: color of the shadow (often semi-transparent with rgba())

What that produces visually

For example, the .shadow-2 utility (0px 4px 8px 0px rgba(0, 0, 0, 0.1)) creates a moderate, soft shadow that sits below the element with no horizontal offset and a 4px vertical offset downward; the 8px blur spreads and softens the shadow edge; the 0px spread leaves the shadow size unchanged; and the rgba(0, 0, 0, 0.1) makes the shadow black at at 10% opacity.

Usage example (equivalent)

The utility .shadow-2 is equivalent to:

box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.1);

Utility classes

Utility classes may be included in your HTML or applied using Utility classes in your Sass.

Utility	Example	Code
.shadow-token	.shadow-2	class=("shadow-2")

Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like '105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (ex: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values:
- u-text('primary-darkest', 'no-underline', 'bold')
- u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s argument list:

u-bg('red-warm-50v', !important)

Utility variants

More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.

Responsive variants

You can apply different styles at differentresponsive breakpoints using responsive utilities. Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).

Utility variable	Responsive
$shadow	false

State variants

You can apply different styles for different state variants using state utilities. Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).

Utility variable	Active	Focus	Hover	Visited
$shadow	false	false	true	false