tailwindcss/docs/source/docs/shadows.blade.md

extends	title	description	features
_layouts.documentation	Shadows	Utilities for controlling the box shadow of an element.	responsive customizable hover active focus true true false false false

@include('_partials.class-table', [ 'rows' => [ [ '.shadow', "box-shadow:\n 0 2px 4px 0 rgba(0,0,0,0.10);", "Apply a small box shadow to an element.", ], [ '.shadow-md', "box-shadow:\n 0 4px 8px 0 rgba(0,0,0,0.12),\n 0 2px 4px 0 rgba(0,0,0,0.08);", "Apply a medium box shadow to an element.", ], [ '.shadow-lg', "box-shadow:\n 0 15px 30px 0 rgba(0,0,0,0.11),\n 0 5px 15px 0 rgba(0,0,0,0.08);", "Apply a large box shadow to an element.", ], [ '.shadow-inner', "box-shadow:\n inset 0 2px 4px 0 rgba(0,0,0,0.06);", "Apply a small inner box shadow to an element.", ], [ '.shadow-none', "box-shadow: none;", "Remove a box shadow from an element.", ], ] ])

Outer shadow

Use the .shadow, .shadow-md, or .shadow-lg utilities to apply different sized outer box shadows to an element.

@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])

.shadow

.shadow-md

.shadow-lg

@slot('code')

@endslot @endcomponent

Inner shadow

Use the .shadow-inner utility to apply a subtle inset box shadow to an element.

This can be useful for things like form controls or wells.

@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])

.shadow-inner

@slot('code')

@endslot @endcomponent

No shadow

Use .shadow-none to remove an existing box shadow from an element.

This is most commonly used to remove a shadow that was applied at a smaller breakpoint.

@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])

.shadow-none

@slot('code')

@endslot @endcomponent

Responsive

To control the shadow of an element at a specific breakpoint, add a {screen}: prefix to any existing shadow utility. For example, use md:shadow-lg to apply the shadow-lg utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')

@endslot @slot('md')

@endslot @slot('lg')

@endslot @slot('xl')

@endslot @slot('code')

@endslot @endcomponent

Customizing

By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the shadows section of your Tailwind config.

If a default shadow is provided, it will be used for the non-suffixed .shadow utility. Any other keys will be used as suffixes, for example the key '2' will create a corresponding .shadow-2 utility.

@component('_partials.customized-config', ['key' => 'shadows'])

• default: '0 2px 4px 0 rgba(0,0,0,0.10)',
• 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
• 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
• 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',

• '1': '0 2px 4px rgba(0,0,0,0.05)',
• '2': '0 4px 8px rgba(0,0,0,0.1)',
• '3': '0 8px 16px rgba(0,0,0,0.15)', 'none': 'none', @endcomponent

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'shadow', 'property' => 'shadows', ], 'variants' => [ 'responsive', ], ])