Shadows

An element with class .shadow-8 shall feel like being 8px distant from the background along the Z axis. Same goes for the other shadows.

Outer
.shadow-1
.shadow-2
.shadow-4
.shadow-8
.shadow-16
.shadow-32
Inner
.shadow-1-inset
.shadow-2-inset
.shadow-4-inset
.shadow-8-inset
.shadow-16-inset
.shadow-32-inset

Shadow contrast

Increase contrast using a subtle inner/outer shadow, typically used with user-provided images that may or may not have a high contrast relative to the background.

It's best to use .shadow-contrast-inset on images. Notice how it affects light areas only.

The utility .shadow-contrast may feel like adding a subtle blur around areas where the image is only slightly darker than the background. It's best when the background is darker than the image (or whatever foreground element is used).

shadow-none
shadow-contrast
shadow-contrast-inset
shadow-none
shadow-contrast
shadow-contrast-inset
shadow-none
shadow-contrast
shadow-contrast-inset