Drop Shadow
Utilities for applying drop-shadow filters to an element.
Default class reference
Class | Properties |
---|---|
drop-shadow-sm | —tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); |
drop-shadow | —tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); |
drop-shadow-md | —tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); |
drop-shadow-lg | —tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)); |
drop-shadow-xl | —tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)); |
drop-shadow-2xl | —tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); |
drop-shadow-none | —tw-drop-shadow: drop-shadow(0 0 #0000); |
Usage
Use the drop-shadow-{amount}
utilities alongside the filter
utility to add a drop shadow to an element.
<div class="filter drop-shadow-lg ...">
<!-- ... -->
</div>
Responsive
To control an element’s drop shadow at a specific breakpoint, add a {screen}:
prefix to any existing drop-shadow utility. For example, use md:drop-shadow-xl
to apply the drop-shadow-xl
utility at only medium screen sizes and above.
<div class="filter drop-shadow-md md:drop-shadow-xl ...">
<!-- ... -->
</div>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
Customizing
You can customize which drop-shadow
utilities are generated using the dropShadow
key in the theme
section of your tailwind.config.js
file.
// tailwind.config.js
module.exports = {
theme: {
+ extend: {
+ dropShadow: {
+ '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
+ }
+ }
}
}
Learn more about customizing the default theme in the theme customization documentation.
Variants
By default, only responsive variants are generated for drop-shadow utilities.
You can control which variants are generated for the drop-shadow utilities by modifying the dropShadow
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ dropShadow: ['hover', 'focus'],
}
}
}
Disabling
If you don’t plan to use the drop-shadow utilities in your project, you can disable them entirely by setting the dropShadow
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ dropShadow: false,
}
}