Box Shadows in Tailwind CSS

Tailwind provides a set of standard shadow utilities like shadow-sm, shadow-md, and shadow-lg. However, for precise control over your design, you can use arbitrary values with the square bracket syntax.

Using Arbitrary Values

To create a custom shadow, use the shadow-[...] utility. The value inside the brackets should match the standard CSS box-shadow syntax (without spaces, or using underscores instead of spaces).

<div class="shadow-[0_20px_50px_rgba(8,_112,_184,_0.7)]">...</div>

Inset Shadows

Inner shadows are created by adding the inset keyword at the beginning of the property. In Tailwind, this is also handled via arbitrary values.

<div class="shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]">...</div>

Performance Tips

• Avoid Massive Blurs: Extremely large blur values can sometimes impact rendering performance on low-end devices.
• Layered Shadows: For the most realistic effect, designers often layer multiple shadows with different offsets and opacities. While this generator focuses on one detailed layer, you can combine multiple values in one property separated by commas.