Tailwind CSS Effects

Tailwind provides plenty of special effects utilities that can add depth and interactivity to your design. These include things like shadows, opacity controls, and custom focus rings.

Box Shadows

Tailwind provides a set of pre-configured box shadow utilities to add depth to your UI. Here are some of the more common settings:

Utility Effect Common Use Case
shadow-sm Subtle shadow Small buttons or subtle inputs.
shadow Standard shadow Standard UI components.
shadow-md Medium depth Navigation menus or dropdowns.
shadow-lg / -xl Deep elevation Modals or featured cards.
shadow-inner Inset shadow Form inputs or "pressed" button states.
shadow-none No shadow Resetting inherited styles.

You can change the shadow color using shadow-{color}-{shade} (e.g., shadow-blue-500/50) or use arbitrary values like shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)].

Opacity

The opacity utility controls the transparency of an entire element, including its children. This is different from "alpha-channel" color utilities which only affect the background. Common opacity settings include:

Utility Value Best Use Case
opacity-0 0 Completely invisible (still takes up space).
opacity-25 0.25 Disabled elements or decorative watermarks.
opacity-50 0.5 Secondary UI or backdrop overlays.
opacity-100 1 Fully opaque (reset utility).
opacity-(--my-var) Variable Linking transparency to a CSS variable.

Focus Rings

Focus rings are essential for accessibility, providing a clear visual indicator for keyboard navigation. Tailwind's ring utilities use a box-shadow hack to create a border that doesn't affect the element's size.

Here's a basic rundown on how it works:

Utility Purpose Example
ring-{width} Sets the thickness of the ring. ring-2
ring-{color} Sets the ring color. ring-blue-600
ring-offset-{width} Creates space between element and ring. ring-offset-2
focus:ring Only applies the ring on keyboard focus. focus:ring-2

For a pleasant user experience, you can combine these utilities to create a clean, accessible focus state:

Example

This example demonstrates some of the basic effects that we've covered here:

View Output

Next, we'll explore some of the various filters in Tailwind CSS.