Tailwind Shadow and Opacity to CSS

Tailwind Shadow and Opacity in CSS

Tailwind provides a curated set of box-shadow presets and a simple opacity scale. These are among the most commonly used Tailwind utilities for adding depth and visual hierarchy.

Box Shadow Scale

/* shadow-sm */
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

/* shadow */
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
            0 1px 2px -1px rgb(0 0 0 / 0.1);

/* shadow-md */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
            0 2px 4px -2px rgb(0 0 0 / 0.1);

/* shadow-lg */
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
            0 4px 6px -4px rgb(0 0 0 / 0.1);

/* shadow-xl */
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
            0 8px 10px -6px rgb(0 0 0 / 0.1);

/* shadow-2xl */
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

/* shadow-inner */
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

/* shadow-none */
box-shadow: 0 0 #0000;

Opacity Scale

Opacity classes use a percentage-to-decimal mapping:

/* opacity-0 */   opacity: 0;
/* opacity-5 */   opacity: 0.05;
/* opacity-25 */  opacity: 0.25;
/* opacity-50 */  opacity: 0.5;
/* opacity-75 */  opacity: 0.75;
/* opacity-100 */ opacity: 1;

Ring Utilities

Ring is Tailwind's alternative to outline/box-shadow for focus indicators:

/* ring-2 */
box-shadow: var(--tw-ring-inset) 0 0 0 2px var(--tw-ring-color);

Best Practices

• Use shadow-sm or shadow for subtle elevation (cards, inputs)
• Use shadow-md to shadow-lg for dropdowns and popovers
• Use shadow-xl or shadow-2xl for modals and dialogs
• Use shadow-inner for inset effects (pressed buttons, input fields)