Shadow

Utilities for controlling the box shadow of an element.

Class

Properties

shadow-l-light

tw-shadow: var(--shadow-l-light) !important

tw-shadow-colored: var(--shadow-l-light) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-l-strong

tw-shadow: var(--shadow-l-strong) !important

tw-shadow-colored: var(--shadow-l-strong) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-l-ultralight

tw-shadow: var(--shadow-l-ultralight) !important

tw-shadow-colored: var(--shadow-l-ultralight) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-m-light

tw-shadow: var(--shadow-m-light) !important

tw-shadow-colored: var(--shadow-m-light) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-m-strong

tw-shadow: var(--shadow-m-strong) !important

tw-shadow-colored: var(--shadow-m-strong) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-m-ultralight

tw-shadow: var(--shadow-m-ultralight) !important

tw-shadow-colored: var(--shadow-m-ultralight) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-s-light

tw-shadow: var(--shadow-s-light) !important

tw-shadow-colored: var(--shadow-s-light) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-s-strong

tw-shadow: var(--shadow-s-strong) !important

tw-shadow-colored: var(--shadow-s-strong) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-s-ultralight

tw-shadow: var(--shadow-s-ultralight) !important

tw-shadow-colored: var(--shadow-s-ultralight) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-xl-light

tw-shadow: var(--shadow-xl-light) !important

tw-shadow-colored: var(--shadow-xl-light) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-xl-strong

tw-shadow: var(--shadow-xl-strong) !important

tw-shadow-colored: var(--shadow-xl-strong) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-xl-ultralight

tw-shadow: var(--shadow-xl-ultralight) !important

tw-shadow-colored: var(--shadow-xl-ultralight) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-xs-light

tw-shadow: var(--shadow-xs-light) !important

tw-shadow-colored: var(--shadow-xs-light) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-xs-strong

tw-shadow: var(--shadow-xs-strong) !important

tw-shadow-colored: var(--shadow-xs-strong) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

shadow-xs-ultralight

tw-shadow: var(--shadow-xs-ultralight) !important

tw-shadow-colored: var(--shadow-xs-ultralight) !important

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important

Usage

Control the shadow of an element using the shadow-{size}-{type} utilities.

xs-strong

xs-light

xs-ultralight

s-strong

s-light

s-ultralight

m-strong

m-light

m-ultralight

l-strong

l-light

l-ultralight

xl-strong

xl-light

xl-ultralight

<div class="shadow-xs-strong ...">shadow-xs-strong</div>
<div class="shadow-xs-light ...">shadow-xs-light</div>
<div class="shadow-xs-ultralight ...">shadow-xs-ultralight</div>
<div class="shadow-s-strong ...">shadow-s-strong</div>
...