shadow-sm utility CSS
The shadow-sm utility applies box-shadow: var(--shadow-sm); which produces 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1).
Tailwind CSS · Utilities reference · all subjects
box-shadow
35 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
shadow-md utility CSS
The shadow-md utility applies box-shadow: var(--shadow-md); which produces 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1).
shadow-lg utility CSS
The shadow-lg utility applies box-shadow: var(--shadow-lg); which produces 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1).
shadow-2xl utility CSS
The shadow-2xl utility applies box-shadow: var(--shadow-2xl); which produces 0 25px 50px -12px rgb(0 0 0 / 0.25).
shadow color custom property syntax
The shadow-(color:<custom-property>) syntax applies --tw-shadow-color: var(<custom-property>); allowing the use of custom CSS properties for shadow colors.
shadow color utilities by color name
Shadow color utilities are available for all colors in the theme with the format shadow-{color}, such as shadow-red-500, shadow-blue-400, etc. Each applies --tw-shadow-color: var(--color-{color});
inset-shadow-sm utility CSS
The inset-shadow-sm utility applies box-shadow: var(--inset-shadow-sm); which produces inset 0 2px 4px rgb(0 0 0 / 0.05).
inset-shadow-none utility CSS
The inset-shadow-none utility applies box-shadow: inset 0 0 #0000; which removes all inset box shadows.
inset-shadow custom property syntax
The inset-shadow-(<custom-property>) syntax applies box-shadow: var(<custom-property>); allowing the use of custom CSS properties for inset box shadows.
inset-shadow arbitrary value syntax
The inset-shadow-[<value>] syntax applies box-shadow: <value>; allowing arbitrary CSS values for inset box shadows.
inset-shadow-inherit utility CSS
The inset-shadow-inherit utility applies --tw-inset-shadow-color: inherit; setting the inset shadow color to inherit from parent.
inset-shadow-current utility CSS
The inset-shadow-current utility applies --tw-inset-shadow-color: currentColor; setting the inset shadow color to the element's current text color.
inset-shadow-transparent utility CSS
The inset-shadow-transparent utility applies --tw-inset-shadow-color: transparent; making the inset shadow transparent.
inset-shadow color utilities by color name
Inset shadow color utilities are available for all colors in the theme with the format inset-shadow-{color}, such as inset-shadow-red-500, inset-shadow-blue-400, etc. Each applies --tw-inset-shadow-color: var(--color-{color});
inset-ring utility CSS
The inset-ring utility applies --tw-inset-ring-shadow: inset 0 0 0 1px; creating a 1px solid inset ring around an element.
inset-ring width syntax
The inset-ring-<number> syntax applies --tw-inset-ring-shadow: inset 0 0 0 <number>px; allowing custom inset ring widths in pixels, such as inset-ring-2 or inset-ring-4.
inset-ring custom property syntax
The inset-ring-(<custom-property>) syntax applies --tw-inset-ring-shadow: inset 0 0 0 var(<custom-property>); allowing the use of custom CSS properties for inset ring widths.
inset-ring arbitrary value syntax
The inset-ring-[<value>] syntax applies --tw-inset-ring-shadow: inset 0 0 0 <value>; allowing arbitrary CSS values for inset ring definitions.
inset-ring-inherit utility CSS
The inset-ring-inherit utility applies --tw-inset-ring-color: inherit; setting the inset ring color to inherit from parent.
inset-ring-current utility CSS
The inset-ring-current utility applies --tw-inset-ring-color: currentColor; setting the inset ring color to the element's current text color. This is the default for inset rings.
inset-ring-transparent utility CSS
The inset-ring-transparent utility applies --tw-inset-ring-color: transparent; making the inset ring transparent.
inset-ring color utilities by color name
Inset ring color utilities are available for all colors in the theme with the format inset-ring-{color}, such as inset-ring-red-500, inset-ring-blue-400, etc. Each applies --tw-inset-ring-color: var(--color-{color});
Shadow opacity modifier
Box shadows support opacity modifiers using the slash syntax, such as shadow-xl/20 or shadow-xl/30. The default box shadow opacities are quite low (25% or less). Increasing the opacity makes box shadows more pronounced.
Inset shadow opacity modifier
Inset shadows support opacity modifiers using the slash syntax, such as inset-shadow-sm/50. The default inset shadow opacities are quite low (5%). Increasing the opacity makes inset shadows more pronounced.
Shadow color utilities with opacity
Colored shadow utilities support opacity modifiers, such as shadow-cyan-500/50 and shadow-blue-500/50. By default colored shadows have an opacity of 100% but this can be adjusted using the opacity modifier.
Inset shadow color utilities with opacity
Colored inset shadow utilities support opacity modifiers, such as inset-shadow-indigo-500/50. By default colored inset shadows have an opacity of 100% but this can be adjusted using the opacity modifier.
Inset ring color utilities with opacity
Inset ring color utilities support opacity modifiers, such as inset-ring-blue-500/50. By default inset rings have an opacity of 100% but this can be adjusted using the opacity modifier.
Remove box shadow with shadow-none
Use the shadow-none utility to remove an existing box shadow from an element.
Remove inset shadow with inset-shadow-none
Use the inset-shadow-none utility to remove an existing inset box shadow from an element.
Remove ring with ring-0
Use the ring-0 utility to remove an existing ring from an element.
Remove inset ring with inset-ring-0
Use the inset-ring-0 utility to remove an existing inset ring from an element.
Responsive design for box shadows
Box shadow utilities support responsive design using breakpoint prefixes. Default class is shadow-none and featured class is shadow-lg for responsive examples.
Customize shadow theme
Customize box shadows in the theme configuration using the shadow theme key. For example, add a custom 3xl shadow with value 0 35px 35px rgba(0, 0, 0, 0.25).
Customize inset shadow theme
Customize inset shadows in the theme configuration using the inset-shadow theme key. For example, add a custom md inset shadow with value inset 0 2px 3px rgba(0, 0, 0, 0.25).
Customize shadow colors
Shadow colors can be customized for shadow, inset-shadow, ring, and inset-ring utilities using the theme configuration.