Skip to main content
🏠CustomizationShadowVersion: Next

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