Shadows

Format: .shadow-DISTANCE-DARKNESS

  • Distance must be one of [1, 2, 4, 8, 16, 32].

  • Darkness is OPTIONAL, when provided, must be one of [20, 40, 60, 80]. Defaults to 20.

For example, an element with class .shadow-8-20 shall feel like being 8px distant from the background along the Z axis. Darkness 20 means it is a very subtle shadow.

 

Outer shadow distance examples
.shadow-1-20
.shadow-2-20
.shadow-4-20
.shadow-8-20
.shadow-16-20
.shadow-32-20
Outer shadow darkness examples
.shadow-8-20
.shadow-8-40
.shadow-8-60
.shadow-8-80
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-0
shadow-contrast
shadow-contrast-inset
shadow-0
shadow-contrast
shadow-contrast-inset
shadow-0
shadow-contrast
shadow-contrast-inset
powered by Boomla