tailwindcss/docs/source/shadows.blade.md

extends	title
_layouts.markdown	Shadows

Shadows

Utilities for controlling the box shadow of an element.

@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => true, 'hover' => false, 'focus' => false ])

Class	Properties	Description
.shadow	box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15);	Apply a small box shadow to an element.
.shadow-md	box-shadow: 0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13);	Apply a medium box shadow to an element.
.shadow-lg	box-shadow: 0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13);	Apply a large box shadow to an element.
.shadow-inner	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05)	Apply a small inner box shadow to an element.
.shadow-none	box-shadow: none;	Remove a box shadow from an element.

Box shadows can be applied using the .shadow-{size} utilities. By default these are a size scale, where the smaller sizes represent more shallow shadows, and larger sizes represent deeper shadows. If you use the .shadow utility without a suffix, you'll get the default shadow.

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

.shadow-inner

.shadow

.shadow-md

.shadow-lg

@slot('code')

@endslot @endcomponent

Responsive

To control the shadow of an element at a specific breakpoint, add a {breakpoint}: 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 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 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
• 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
• 'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
• 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',

• '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