What is Box shadow utilities in Tailwind?

Tailwindmarkup~5 mins

Box shadow utilities in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Box shadows add depth and focus to elements on a webpage. They make things look like they are lifted off the page.

To highlight buttons when users hover over them.

To create card-like sections that stand out from the background.

To add subtle depth to images or containers.

To improve visual hierarchy by separating elements.

To give a soft glow effect around important content.

Syntax

Tailwind

shadow-{size}

Examples:
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-none

Use shadow-none to remove shadows.

Sizes go from small (shadow-sm) to very large (shadow-2xl).

Examples

This adds a small shadow around the box.

Tailwind

<div class="shadow-sm p-4">Small shadow</div>

This adds a bigger, more noticeable shadow.

Tailwind

<div class="shadow-lg p-4">Large shadow</div>

This adds a shadow inside the box edges.

Tailwind

<div class="shadow-inner p-4">Inner shadow</div>

This removes any shadow from the element.

Tailwind

<div class="shadow-none p-4">No shadow</div>

Sample Program

This page shows different Tailwind box shadow utilities on white boxes with some padding and rounded corners. The background is light gray to see the shadows clearly.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Box Shadow Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex flex-col items-center gap-6 p-8 min-h-screen">
  <h1 class="text-2xl font-bold mb-4">Tailwind Box Shadow Utilities</h1>

  <div class="shadow-sm bg-white p-6 rounded">Small shadow</div>
  <div class="shadow-md bg-white p-6 rounded">Medium shadow</div>
  <div class="shadow-lg bg-white p-6 rounded">Large shadow</div>
  <div class="shadow-xl bg-white p-6 rounded">Extra large shadow</div>
  <div class="shadow-2xl bg-white p-6 rounded">2XL shadow</div>
  <div class="shadow-inner bg-white p-6 rounded">Inner shadow</div>
  <div class="shadow-none bg-white p-6 rounded">No shadow</div>
</body>
</html>

OutputSuccess

Important Notes

Box shadows help users see which parts of the page are clickable or important.

Use shadows sparingly to keep the design clean and not too busy.

Test shadows on different screen sizes to ensure they look good everywhere.

Summary

Box shadow utilities add depth by creating shadows around or inside elements.

Tailwind offers multiple sizes and an option for inner shadows.

Use shadow-none to remove shadows when needed.