Tailwind CSS Academy · บทเรียน

เงากล่อง

เพิ่มมิติด้วย shadow-sm ถึง shadow-2xl ใช้ shadow-inner เพื่อสร้างเอฟเฟกต์เงาด้านใน และลบเงาด้วย shadow-none

เงากล่อง เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Tailwind CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Shadows and Visual Depth

Box shadows create a sense of depth and elevation in flat interfaces. They make elements appear to float above the page, drawing the user's eye and indicating hierarchy. Tailwind's shadow-* utilities provide a carefully designed scale of box shadows that work harmoniously together. The values range from the barely perceptible shadow-sm to the dramatic shadow-2xl, giving you full control over elevation.

<!-- Shadow elevation scale -->
<div class="grid grid-cols-2 gap-6 p-8 bg-gray-50">
  <div class="bg-white p-4 rounded-lg shadow-sm">shadow-sm</div>
  <div class="bg-white p-4 rounded-lg shadow">shadow</div>
  <div class="bg-white p-4 rounded-lg shadow-md">shadow-md</div>
  <div class="bg-white p-4 rounded-lg shadow-lg">shadow-lg</div>
  <div class="bg-white p-4 rounded-lg shadow-xl">shadow-xl</div>
  <div class="bg-white p-4 rounded-lg shadow-2xl">shadow-2xl</div>
</div>

Shadow Utility Reference

Each shadow in Tailwind's scale is designed for a specific elevation level. shadow-sm (very subtle, 1px blur) works for inputs and small UI elements. shadow and shadow-md suit cards and dropdowns. shadow-lg is ideal for popovers and modals. shadow-xl and shadow-2xl are reserved for large modals, full-screen overlays, and dramatic hero elements that need to appear significantly elevated.

<!-- Semantic shadow usage by component type -->
<div class="space-y-4 max-w-sm">
  <input class="w-full border border-gray-300 rounded-lg px-4 py-2 shadow-sm" placeholder="Input with shadow-sm" />
  <div class="bg-white border rounded-xl p-4 shadow-md">Card with shadow-md</div>
  <div class="bg-white rounded-2xl p-6 shadow-xl">Modal panel with shadow-xl</div>
</div>

shadow-inner for Inset Shadows

shadow-inner applies an inward shadow, making an element look recessed or pressed into the surface. This is the visual opposite of the standard elevation shadows. Common uses include pressed button states, search input fields to indicate they are active, concave containers, and toggle switch tracks that should look sunken to contrast with the raised knob element.

<!-- Inset shadow for recessed / pressed effects -->
<div class="flex gap-4">
  <!-- Search input looking recessed -->
  <div class="flex-1 bg-gray-100 rounded-lg px-4 py-3 shadow-inner flex items-center gap-2">
    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z" />
    </svg>
    <span class="text-gray-400 text-sm">Search...</span>
  </div>

  <!-- Pressed button state -->
  <button class="bg-gray-200 shadow-inner px-4 py-2 rounded-lg font-medium text-gray-700">
    Pressed
  </button>
</div>

shadow-none to Remove Shadows

shadow-none removes all box shadows from an element. This is useful when you need to override an inherited shadow (for example, removing a card shadow on mobile where the card is full-width and the shadow looks awkward at the screen edges). The pattern shadow-md md:shadow-lg uses a smaller shadow on mobile and a larger one on desktop, where floating cards look better.

<!-- Remove shadow on mobile, restore on tablet+ -->
<div class="bg-white p-4 rounded-none sm:rounded-xl shadow-none sm:shadow-lg">
  <h3 class="font-bold">Responsive Card Shadow</h3>
  <p class="text-gray-600 mt-1">No shadow on mobile, shadow on larger screens.</p>
</div>

Colored Box Shadows

Tailwind v3 introduced colored shadows: shadow-blue-500 makes the shadow appear in blue. This creates vibrant, glow-like effects popular in dark themes and landing pages. The shadow color is applied using the --tw-shadow-color CSS variable, so you still need a shadow-* size utility alongside the color class — for example, shadow-lg shadow-blue-500/50.

<!-- Colorful glow effects with colored shadows -->
<div class="flex gap-6 p-8 bg-gray-900 justify-center">
  <button class="bg-blue-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-blue-500/50">
    Blue Glow
  </button>
  <button class="bg-purple-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-purple-500/50">
    Purple Glow
  </button>
  <button class="bg-pink-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-pink-500/50">
    Pink Glow
  </button>
</div>

Hover-Lifted Card Pattern

One of the most common interactive patterns is the hover-lift effect: a card starts with a subtle shadow and gains a deeper shadow on hover, creating the illusion of lifting. Combine shadow-md hover:shadow-xl with transition-shadow duration-300 for a smooth animation. This signals to users that the card is interactive and makes dashboards and product listings feel polished.

<!-- Interactive card with hover-lift effect -->
<div class="grid grid-cols-3 gap-6 p-6">
  <div class="bg-white rounded-xl p-5 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
      <span class="text-blue-600">📊</span>
    </div>
    <h3 class="font-bold">Analytics</h3>
    <p class="text-sm text-gray-500 mt-1">View your stats</p>
  </div>
</div>

Drop Shadow vs Box Shadow

Tailwind provides both box shadows (shadow-*) and drop shadows (drop-shadow-*). The key difference: shadow-* applies to the element's bounding box (rectangle), while drop-shadow-* is a CSS filter that follows the element's actual visible shape, including transparent areas. drop-shadow-* is ideal for irregularly shaped elements like PNG icons with transparent backgrounds.

<!-- Box shadow (rectangular) vs drop shadow (shape-aware) -->
<div class="flex gap-8 p-6 items-center">
  <!-- Box shadow on transparent PNG -->
  <div>
    <p class="text-sm mb-2">shadow-lg (rectangular)</p>
    <svg class="w-16 h-16 text-blue-500 shadow-lg" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
    </svg>
  </div>

  <!-- Drop shadow follows shape -->
  <div>
    <p class="text-sm mb-2">drop-shadow-lg (shape-aware)</p>
    <svg class="w-16 h-16 text-blue-500 drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
    </svg>
  </div>
</div>

Layering Multiple Shadows

CSS supports multiple shadows on one element, but Tailwind's built-in utilities provide only one shadow per class. For multiple layers, extend Tailwind's theme in tailwind.config.js with a custom shadow that includes a comma-separated list of shadow definitions. This allows sophisticated layering like a material design elevation effect or a subtle outer glow combined with an inner definition shadow.

/* In tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        /* Layered: outer glow + standard shadow */
        'glow-blue': '0 0 20px rgba(59,130,246,0.5), 0 4px 6px rgba(0,0,0,0.1)',
        /* Material elevation --*/
        'material': '0 2px 1px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.1), 0 16px 24px rgba(0,0,0,0.06)',
      }
    }
  }
}

Shadows in Dark Mode

Shadows become less visible on dark backgrounds because they typically use translucent black. In dark mode, Tailwind colored shadows — or lighter shadow tones — maintain visibility. A common pattern is shadow-gray-700/50 in dark mode to create a visible shadow against a dark surface. Alternatively, use borders instead of shadows on dark backgrounds since borders remain visible regardless of background lightness.

<!-- Shadow strategies for dark mode -->
<div class="bg-gray-900 p-8 rounded-xl space-y-4">
  <!-- Standard shadow (invisible on dark bg) -->
  <div class="bg-gray-800 p-4 rounded-lg shadow-xl">
    Shadow barely visible
  </div>

  <!-- Colored shadow for dark mode -->
  <div class="bg-gray-800 p-4 rounded-lg shadow-lg shadow-gray-700/70">
    Shadow visible with colored tint
  </div>

  <!-- Border instead of shadow on dark bg -->
  <div class="bg-gray-800 border border-gray-700 p-4 rounded-lg">
    Border as separator on dark backgrounds
  </div>
</div>

Focus Shadow for Accessibility

Visible focus indicators are required by WCAG 2.1 AA accessibility standards. While Tailwind's ring-* utilities are the preferred modern approach, box shadows can also serve as focus indicators. The pattern focus:shadow-[0_0_0_3px_rgba(59,130,246,0.5)] creates a blue halo — essentially what ring-2 ring-blue-500 does, but using the shadow property for legacy browser compatibility.

<!-- Accessible focus indicators using shadow and ring -->
<div class="flex gap-4 flex-wrap">
  <!-- Using ring (preferred modern approach) -->
  <button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
    Ring Focus
  </button>

  <!-- Using shadow for legacy support -->
  <button class="bg-purple-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:shadow-[0_0_0_3px_rgba(168,85,247,0.5)]">
    Shadow Focus
  </button>
</div>

Complete Shadow Hierarchy

In a real UI, consistent shadow assignment creates a clear visual hierarchy. Use a systematic approach: shadow-sm for subtle borders on inputs, shadow-md for content cards, shadow-lg for dropdown menus, shadow-xl for side drawers, and shadow-2xl for modal dialogs. This hierarchy helps users understand spatial relationships and which elements are contextual versus primary.

<!-- Dashboard showing shadow hierarchy -->
<div class="bg-gray-100 p-6 space-y-4">
  <!-- Page-level card: shadow-md -->
  <div class="bg-white rounded-xl shadow-md p-5">
    <h2 class="font-bold text-lg">Analytics Overview</h2>

    <!-- Inline component: shadow-sm -->
    <div class="mt-4 grid grid-cols-3 gap-3">
      <div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
        <div class="text-2xl font-bold text-blue-600">142</div>
        <div class="text-xs text-gray-500">Users</div>
      </div>
      <div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
        <div class="text-2xl font-bold text-green-600">94%</div>
        <div class="text-xs text-gray-500">Uptime</div>
      </div>
      <div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
        <div class="text-2xl font-bold text-purple-600">38</div>
        <div class="text-xs text-gray-500">Issues</div>
      </div>
    </div>
  </div>
</div>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: shadow-sm through shadow-2xl provide an elevation scale for depth, shadow-inner creates a recessed appearance for pressed states and search inputs, and colored shadows like shadow-lg shadow-blue-500/50 create glow effects for dark themes. Next up we explore outline and ring utilities for accessible focus indicators.

คำถามที่พบบ่อย

บทเรียน “เงากล่อง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เงากล่อง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เงากล่อง”

เพิ่มมิติด้วย shadow-sm ถึง shadow-2xl ใช้ shadow-inner เพื่อสร้างเอฟเฟกต์เงาด้านใน และลบเงาด้วย shadow-none คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “เงากล่อง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม

ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Tailwind CSS Academy