Box Shadows and Opacity Control in Tailwind CSS

Tailwind provides utilities for adding elegant shadows and controlling the opacity of elements. These can help improve visual hierarchy and draw attention to important components.

1. Box Shadow Utilities

Tailwind includes multiple levels of shadows:

.shadow

.shadow-md

.shadow-lg

.shadow-xl

.shadow-2xl

.shadow-inner

Each level adds a different depth of elevation.

2. Customizing Shadow Color (Using Drop Shadow)

To control shadow color, combine with background or use drop-shadow utilities (useful with SVG or transparent content):

Drop Shadow Effect

3. Opacity Utilities

Use opacity-{0–100} to control the transparency of an element:

100%

75%

50%

25%

Great for layering and effects like hover fades.

4. Best Practices

Use shadows sparingly to enhance focus.
Pair hover:shadow-lg with buttons and cards for interactivity.
Use opacity-0 + transition-opacity for fade effects.

Conclusion

Box shadows and opacity control in Tailwind help you create subtle depth and layering effects with ease. Use them strategically to guide user focus and enhance UI clarity.

← Previous: Divide and Ring Utilities Next: Hover, Focus, Active, Visited →