Visual Effects: Shadows and Filters

Adding depth and texture to web layouts helps guide user focus. Let us explore how to implement elevation shadows, rounded borders, and modern glassmorphism filters.

1. Box Shadows (Elevation)

Adding shadows to cards or dropdown panels creates a sense of depth and elevation. Tailwind provides a pre-configured scale for shadows:

• shadow-sm: Very subtle shadow (ideal for small buttons).
• shadow: Standard shadow (ideal for input fields).
• shadow-md: Medium shadow.
• shadow-lg: Large shadow (ideal for card containers).
• shadow-xl: Extra large shadow.
• shadow-2xl: Deep elevation shadow (ideal for modals).
• shadow-none: Removes box shadows.

<div className="bg-white p-6 rounded-lg shadow-lg">Elevated Card</div>

2. Rounded Borders (Border Radius)

Applying rounded corners softens layouts. You can control corner roundness using these classes:

• rounded-sm: Small border radius (2px).
• rounded: Standard border radius (4px).
• rounded-md: Medium border radius (6px).
• rounded-lg: Large border radius (8px).
• rounded-2xl: Extra large border radius (16px).
• rounded-full: Creates fully rounded pills or circular profile badges.

<!-- Circular profile image -->
<img className="w-16 h-16 rounded-full" src="/profile.jpg" alt="User avatar" />

3. Filters and Glassmorphism (Backdrop Blur)

Modern design layouts frequently use glassmorphism—a visual effect that mimics frosted glass. You can achieve this by combining translucent background colors with backdrop filters.

To create a glassmorphism effect:

1. Enable backdrop filter: backdrop-filter (optional or implied in newer Tailwind versions).
2. Set a blur strength: backdrop-blur-md or backdrop-blur-lg.
3. Set a translucent background color: bg-white/70 (70% opacity white).

<!-- Translucent frosted-glass sticky navigation header -->
<header className="sticky top-0 w-full bg-white/70 backdrop-blur-md border-b z-50 p-4">
  Sticky Header Navigation
</header>