tailwindcss/docs/source/docs/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.

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