Shadow
Utilities for controlling the box shadow of an element.
- ClassProperties
- 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.
<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>
...