Tailwind CSS Shadows

In modern web design, shadow effects are an important tool for creating visual hierarchy and a sense of depth.

Tailwind CSS provides a powerful and flexible set of shadow utility classes that make it easy to implement various shadow effects.

This article will comprehensively introduce the shadow system in Tailwind CSS, including box-shadow (box shadow), text-shadow (text shadow), shadow color and opacity control, and the application of inset shadow effects.

What are CSS Shadows?

Before diving into Tailwind's specific implementation, let's first understand the basic concepts of CSS shadows.

CSS shadows are mainly divided into two types:

  1. Box shadow (box-shadow): Applied to the entire box model of an element
  2. Text shadow (text-shadow): Applied only to the text content of an element

Shadow effects can:

  • Enhance the visual hierarchy of elements
  • Create a "floating" effect
  • Simulate lighting and depth
  • Highlight important content

box-shadow in Tailwind

Tailwind provides a series of preset box-shadow utility classes, divided into 6 levels from subtle to strong:

Example

<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-2xl">Extra extra large shadow</div>

Try it »

Shadow Level Comparison Table

Class Name Description Use Cases
shadow-sm Very subtle shadow Button hover, slight lift
shadow Default shadow (medium size) Cards, regular elements
shadow-md Medium shadow Modals, important notifications
shadow-lg Large shadow Floating panels, prominent elements
shadow-xl Extra large shadow Specially emphasized elements
shadow-2xl Extra extra large shadow Elements that need to stand out very prominently

Code Examples and Practice

Example

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
  <div class="text-xl font-medium text-black">Tailwind Shadow Example</div>
  <p class="text-gray-500">This is a card example using shadow-md</p>
</div>

Try it »

Effect Description：

  • Created a card with a white background
  • Usedshadow-mdclass to add a medium shadow
  • Combined with rounded corners (rounded-xlto make the shadow effect more natural

text-shadow in Tailwind

Tailwind does not include text-shadow utility classes by default, but they can be added in the following ways:

Method 1: Using a Plugin

Installtailwindcss-textshadowplugin:

Example

npm install tailwindcss-textshadow

Then intailwind.config.jsconfigure:

Example

module.exports = {
  plugins: [
    require('tailwindcss-textshadow')
  ],
  theme: {
    textShadow: {
      'sm': '1px 1px 2px rgba(0, 0, 0, 0.5)',
      'DEFAULT': '2px 2px 4px rgba(0, 0, 0, 0.5)',
      'lg': '4px 4px 8px rgba(0, 0, 0, 0.5)',
    }
  }
}

Usage example:

Example

<h1 class="text-shadow-lg">Heading with Shadow</h1>

Method 2: Custom Utility Classes

Add in CSS:

Example

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  .text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
}

Shadow Color and Opacity Control

Tailwind allows you to control the color and opacity of shadows through utility class combinations.

1. Using Shadow Color Utility Classes

Example

<div class="shadow-lg shadow-blue-500/50">Blue semi-transparent shadow</div>

Syntax breakdown:

  • shadow-{color}: Set the shadow color (e.g., blue-500)
  • /{opacity}: Set the shadow opacity (e.g., 50 means 50%)

2. Available Colors and Opacity

Tailwind supports all built-in colors and arbitrary opacity values:

Example

<div class="shadow-lg shadow-red-400/30">Semi-transparent blue shadow</div>
<div class="shadow-lg shadow-emerald-300/80">Strong emerald green shadow</div>
<div class="shadow-lg shadow-purple-600/20">Faint purple shadow</div>

3. Custom Shadow Colors

Intailwind.config.jsExtend in:

Example

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 4px 6px -1px rgba(156, 39, 176, 0.3)',
      }
    }
  }
}

Inset Shadow Effect (inset)

Inset shadows can create a sunken or pressed-in effect and are commonly used in interactive elements such as buttons and input fields.

1. Using Preset Inset Shadow Classes

Example

<div class="shadow-inner">Inset shadow effect</div>

2. Custom Inset Shadows

Add in the configuration file:

Example

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'inner-lg': 'inset 0 4px 6px 0 rgba(0, 0, 0, 0.1)',
      }
    }
  }
}

3. Practical Application Examples

Example

<button class="px-4 py-2 bg-gray-100 rounded-lg shadow-inner hover:shadow-inner-lg">
Click button
</button>

Effect Description：

  • Default state has a slight inset shadow
  • Inset shadow intensifies on hover (hover:shadow-inner-lg)
  • creating the visual effect of the button being pressed down

Advanced Techniques and Best Practices

1. Combining Outer and Inner Shadows

Example

<div class="shadow-lg shadow-inner">Outer shadow + inner shadow combination</div>

2. Responsive Shadows

Example

<div class="shadow-sm md:shadow-lg">Small shadow on small screens, large shadow on large screens</div>

3. Hover and Focus States

Example

<button class="shadow hover:shadow-lg focus:shadow-outline">
Interactive button
</button>

4. Shadow Animations

Example

<button class="shadow-md hover:shadow-xl transition-shadow duration-300">
Button with transition effect
</button>

Practice Challenges

  1. Create a card component with a medium shadow by default; when hovered, the shadow becomes larger and changes color
  2. Design an input field with an inset shadow; the inset shadow disappears when it gains focus
  3. Implement a text heading that uses text-shadow to create a neon light effect
  4. Combine outer and inner shadows to create a button with a three-dimensional feel

Summary of Key Points

Core Utility Classes Quick Reference

Function Class Name Example Description
Box shadow shadow, shadow-lg Outer shadows of different sizes
Inset shadow shadow-inner Shadow inside an element
Shadow color shadow-blue-500 Set the shadow color
Shadow opacity shadow-blue-500/50 Set the shadow opacity
Text shadow text-shadow (requires customization) Add shadow to text

Best Practice Recommendations

  1. Use in moderation: Shadows should enhance the design, not distract attention
  2. Stay consistent: Maintain similar shadow levels throughout the project
  3. Consider performance: Too many complex shadows may affect rendering performance
  4. Combine with other properties: Shadows work better when combined with rounded corners and transition effects
Other Extensions