Box shadow

Syntax

Class
Properties
shadow-{distance}
box-shadow: {parameter specific value};
shadow-{distance}-{darkness}
box-shadow: {parameter specific value};
shadow-outline-{...color}
box-shadow: 0 0 0 3px {color};
shadow-{distance}-inset
box-shadow: {parameter specific value} inset;
shadow-{distance}-{darkness}-inset
box-shadow: {parameter specific value} inset;
shadow-contrast-inset
box-shadow: {parameter specific value} inset;
shadow-none
box-shadow: 0 0 #0000;

Parameters

distance
1 | 2 | 4 | 8 | 16 | 32

Perceived shadow distance relative to the background along the Z axis in px unit.

darkness
uint32

Perceived shadow darkness on a scale of 0-100. Default 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.

 

Distance from the background.

<div class="t1 w-full p-64 flex flex-center bg-c-gray-50"> <div class="t1 w-256 h-128 bg-c-white shadow-1"></div> </div>

Darkness.

<div class="t1 w-full p-64 flex flex-center bg-c-gray-50"> <div class="t1 w-256 h-128 bg-c-white shadow-8-20"></div> </div>

Inner shadows.

<div class="t1 w-full p-64 flex flex-center bg-c-white"> <div class="t1 w-256 h-128 bg-c-gray-100 shadow-1-inset"></div> </div>

Shadow contrast inset

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

It can be used on elements directly when the images are applied as background images. It can not be applied to <img> elements directly as they can not have inner-shadows applied. In that case, the image has to be wrapped in another element (typically a <div>) and the shadow added to yet another element that overlays the image.

Notice how this shadow only affects light areas of images:

 

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

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Subtle shadow 4px distant from the background.
t1 shadow-4-20
.t1.shadow-4-20 { box-shadow: 0 1px 4px -0.5px rgba(0,0,0,0.14); }
Shadow 8px distant from the background with darkness 40.
t1 shadow-8-40
.t1.shadow-8-40 { box-shadow: 0 3px 8px -2px rgba(0,0,0,0.34); }
Inset subtle shadow 4px distant from the background.
t1 shadow-4-inset
.t1.shadow-4-inset { box-shadow: 0 1px 4px -0.5px rgba(0,0,0,0.14) inset; }
Inner shadow 4px distant from the background with darkness 40.
t1 shadow-4-40-inset
.t1.shadow-4-40-inset { box-shadow: 0 1px 4px -0.5px rgba(0,0,0,0.28) inset; }
Inner shadow for increased contrast.
t1 shadow-contrast-inset
.t1.shadow-contrast-inset { box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset; }
No shadows.
t1 shadow-none
.t1.shadow-none { box-shadow: 0 0 #0000; }
Shadow outline
t1 shadow-outline-hex-123456
.t1.shadow-outline-hex-123456 { box-shadow: 0 0 0 3px #123456; }