utilities/effects/box-shadow.md
Utilities for controlling the box shadow of an element.
<PlaygroundWithVariants variant='' :variants="['', 'sm', 'md', 'lg', 'xl', '2xl', 'inner', 'none']" prefix='shadow' fixed='p-2 dark:text-white opacity-85 overflow-hidden' appended='bg-teal-400 w-full h-32 rounded-md' nested=true html='<div class="bg-teal-400 w-full h-32 rounded-md {class}"></div>' />
<Customizing>export default {
theme: {
boxShadow: {
'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility.
'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
'none': 'none',
},
},
}
<PlaygroundWithVariants variant='gray-500' type='color' prefix='shadow' fixed='p-2 dark:text-white opacity-85 overflow-hidden' appended='bg-teal-400 w-full h-32 rounded-md shadow-2xl' nested=true html='<div class="bg-teal-400 w-full h-32 rounded-md shadow-2xl {class}"></div>' />
<Customizing>export default {
theme: {
boxShadowColor: {
gray: '#1c1c1e',
},
},
}