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

extends	title
_layouts.documentation	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 2px 4px 0 rgba(0,0,0,0.10);	Apply a small box shadow to an element.
.shadow-md	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);	Apply a medium box shadow to an element.
.shadow-lg	box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);	Apply a large box shadow to an element.
.shadow-inner	box-shadow: 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