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>
...