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 shadows and one inner shadow. You can, of course, modify these values as needed. This is done in the shadows section of your Tailwind config. As you can see from the defaults we provide, it's possible to apply multiple shadows per utility using comma separation.

Take note that a default shadow is required. This is the value used for the non-suffixed version of this utility (.shadow).

@component('_partials.customized-config') @slot('default') { // ... 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)', 'none': 'none', }, } @endslot @slot('customized') { // ... shadows: { default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', 'big': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', 'huge': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)', 'none': 'none', }, } @endslot @endcomponent