Sombras

Sombras exteriores con shadow-*

Las sombras exteriores son uno de los recursos visuales más utilizados para dar profundidad y jerarquía a los elementos de una interfaz. Tailwind CSS ofrece una escala predefinida de sombras que van desde sutiles hasta muy pronunciadas, aplicables con una sola clase.

Las clases disponibles para sombras exteriores son:

• shadow-xs: sombra mínima, apenas perceptible
• shadow-sm: sombra pequeña
• shadow: sombra por defecto
• shadow-md: sombra media
• shadow-lg: sombra grande
• shadow-xl: sombra extra grande
• shadow-2xl: sombra muy pronunciada
• shadow-none: elimina cualquier sombra

Comparativa de tamaños de sombra

<div class="flex flex-wrap gap-6 p-8">
  <div class="size-24 rounded-lg bg-white shadow-xs"></div>
  <div class="size-24 rounded-lg bg-white shadow-sm"></div>
  <div class="size-24 rounded-lg bg-white shadow"></div>
  <div class="size-24 rounded-lg bg-white shadow-md"></div>
  <div class="size-24 rounded-lg bg-white shadow-lg"></div>
  <div class="size-24 rounded-lg bg-white shadow-xl"></div>
  <div class="size-24 rounded-lg bg-white shadow-2xl"></div>
</div>

Cada nivel de sombra incrementa tanto el desplazamiento vertical como el radio de difuminado, creando una sensación progresiva de elevación. Las sombras más pequeñas son ideales para tarjetas y botones, mientras que las grandes funcionan bien en modales y elementos flotantes.

Sombras con color

Tailwind CSS permite cambiar el color de la sombra utilizando la clase shadow-{color}:

<div class="rounded-lg bg-white p-6 shadow-lg shadow-blue-500/40">
  Tarjeta con sombra azul semitransparente
</div>

<div class="rounded-lg bg-white p-6 shadow-lg shadow-red-500/30">
  Tarjeta con sombra roja
</div>

<button class="rounded-lg bg-indigo-600 px-6 py-3 text-white shadow-lg shadow-indigo-500/50">
  Botón con sombra de color
</button>

Las sombras con color son muy efectivas para reforzar la identidad visual de botones y componentes interactivos. La notación /40 o /50 controla la opacidad del color de la sombra.

Sombras interiores con inset-shadow-*

Tailwind CSS 4 incorpora las utilidades inset-shadow-* como clases dedicadas para sombras interiores. A diferencia de las sombras exteriores, estas se proyectan hacia el interior del elemento, creando un efecto de profundidad hundida.

Escala de sombras interiores

<div class="flex flex-wrap gap-6 p-8">
  <div class="size-24 rounded-lg bg-gray-100 inset-shadow-xs"></div>
  <div class="size-24 rounded-lg bg-gray-100 inset-shadow-sm"></div>
  <div class="size-24 rounded-lg bg-gray-100 inset-shadow"></div>
</div>

Las sombras interiores son especialmente útiles para campos de formulario, paneles empotrados y cualquier elemento que deba aparentar estar por debajo del nivel de la superficie.

Sombras interiores con color

Al igual que las sombras exteriores, las interiores aceptan un modificador de color:

<input
  type="text"
  placeholder="Campo de texto"
  class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 inset-shadow-sm inset-shadow-gray-400/30"
/>

Combinación de sombra exterior e interior

Es posible aplicar ambas sombras sobre el mismo elemento para crear efectos de profundidad más elaborados:

<div class="rounded-xl bg-white p-6 shadow-md inset-shadow-sm inset-shadow-gray-200/50">
  <h3 class="font-semibold text-gray-800">Componente con doble sombra</h3>
  <p class="mt-2 text-sm text-gray-600">Sombra exterior para elevar e interior para dar textura.</p>
</div>

La combinación de shadow-* e inset-shadow-* genera dos capas de sombra independientes que se renderizan de forma simultánea, permitiendo efectos visuales que antes requerían CSS personalizado.

Text shadow con text-shadow-*

Tailwind CSS incluye las utilidades text-shadow-* para aplicar sombras directamente al texto. Esta funcionalidad permite mejorar la legibilidad del texto sobre fondos complejos o crear efectos tipográficos decorativos.

Escala de sombras de texto

<p class="text-4xl font-bold text-white text-shadow-xs">Sombra extra pequeña</p>
<p class="text-4xl font-bold text-white text-shadow-sm">Sombra pequeña</p>
<p class="text-4xl font-bold text-white text-shadow">Sombra por defecto</p>
<p class="text-4xl font-bold text-white text-shadow-md">Sombra media</p>
<p class="text-4xl font-bold text-white text-shadow-lg">Sombra grande</p>

Text shadow con color

El color de la sombra de texto se controla mediante text-shadow-{color}:

<h1 class="text-5xl font-bold text-white text-shadow-lg text-shadow-black/50">
  Título con sombra oscura
</h1>

<h2 class="text-3xl font-bold text-blue-600 text-shadow-sm text-shadow-blue-900/30">
  Subtítulo con sombra tonal
</h2>

Caso práctico: texto sobre imagen

<div class="relative h-64 overflow-hidden rounded-xl">
  <img src="paisaje.jpg" alt="Fondo" class="size-full object-cover" />
  <div class="absolute inset-0 flex items-center justify-center">
    <h2 class="text-5xl font-bold text-white text-shadow-lg text-shadow-black/60">
      Bienvenido
    </h2>
  </div>
</div>

La sombra de texto mejora la legibilidad del texto blanco sobre fotografías sin necesidad de superponer un degradado oscuro completo.

Anillos con ring-* e inset-ring-*

Las utilidades ring-* generan un contorno tipo anillo alrededor de un elemento utilizando box-shadow en lugar de border. Esto las hace ideales para indicadores de foco, selección y estados interactivos sin alterar el tamaño del elemento.

Anillos exteriores

<button class="rounded-lg bg-blue-600 px-6 py-2 text-white ring-2 ring-blue-300">
  Botón con anillo exterior
</button>

<button class="rounded-lg bg-white px-6 py-2 text-gray-800 ring-1 ring-gray-200">
  Botón con borde sutil
</button>

La clase ring-2 establece un anillo de 2px de grosor, mientras que ring-blue-300 define su color. Al estar implementado con box-shadow, el anillo no desplaza elementos adyacentes.

Anillos con offset

La clase ring-offset-* añade un espacio entre el borde del elemento y el anillo:

<button class="rounded-lg bg-indigo-600 px-6 py-2 text-white ring-2 ring-indigo-600 ring-offset-2">
  Anillo con separación
</button>

El ring-offset crea un hueco visible entre el elemento y su anillo, técnica muy usada para indicar el estado de foco en botones y campos de formulario siguiendo las guías de accesibilidad.

Anillos interiores con inset-ring-*

Tailwind CSS 4 introduce inset-ring-* para crear anillos que se renderizan hacia el interior del elemento:

<div class="rounded-lg bg-white p-6 inset-ring inset-ring-gray-200">
  Panel con borde interior tipo anillo
</div>

<div class="rounded-lg bg-blue-50 p-4 inset-ring-2 inset-ring-blue-200">
  Alerta con anillo interior azul
</div>

La diferencia clave es que inset-ring-* no sobresale del elemento, lo que evita problemas de superposición con componentes vecinos.

Personalización de sombras con @theme

La directiva @theme permite redefinir o ampliar las sombras predeterminadas del sistema de diseño, creando tokens reutilizables en todo el proyecto.

Definir sombras personalizadas

@import "tailwindcss";

@theme {
  --shadow-card: 0 2px 8px -2px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.04);
  --shadow-elevated: 0 8px 24px -4px oklch(0 0 0 / 0.12), 0 2px 6px -2px oklch(0 0 0 / 0.06);
  --inset-shadow-input: inset 0 1px 2px oklch(0 0 0 / 0.06);
}

Estas definiciones generan automáticamente las clases shadow-card, shadow-elevated e inset-shadow-input:

<div class="rounded-xl bg-white p-6 shadow-card">
  Tarjeta con sombra personalizada
</div>

<div class="rounded-xl bg-white p-8 shadow-elevated">
  Modal con sombra elevada
</div>

<input
  type="email"
  placeholder="correo@ejemplo.com"
  class="w-full rounded-lg border border-gray-300 px-4 py-2 inset-shadow-input"
/>

Ejemplo práctico: sistema de elevación

Un patrón habitual en sistemas de diseño es definir niveles de elevación consistentes:

@import "tailwindcss";

@theme {
  --shadow-elevation-1: 0 1px 3px oklch(0 0 0 / 0.06);
  --shadow-elevation-2: 0 4px 12px -2px oklch(0 0 0 / 0.08);
  --shadow-elevation-3: 0 12px 32px -4px oklch(0 0 0 / 0.12);
}

<div class="flex gap-6 p-8">
  <div class="rounded-lg bg-white p-4 shadow-elevation-1">Nivel 1</div>
  <div class="rounded-lg bg-white p-4 shadow-elevation-2">Nivel 2</div>
  <div class="rounded-lg bg-white p-4 shadow-elevation-3">Nivel 3</div>
</div>

Al centralizar la definición de sombras en @theme, todo el equipo de desarrollo utiliza los mismos valores, garantizando coherencia visual en toda la aplicación.

Sombras en estados interactivos

Las sombras cobran especial relevancia cuando se combinan con variantes de estado como hover:, focus: y active:. Esto permite crear interfaces con retroalimentación visual clara.

Tarjeta interactiva

<div class="rounded-xl bg-white p-6 shadow-sm transition-shadow duration-200 hover:shadow-lg">
  <h3 class="font-semibold text-gray-800">Tarjeta elevable</h3>
  <p class="mt-2 text-sm text-gray-600">Pasa el cursor para elevar la tarjeta.</p>
</div>

Botón con feedback de sombra

<button class="rounded-lg bg-emerald-600 px-6 py-3 text-white shadow-md shadow-emerald-500/40 transition-all duration-150 hover:shadow-lg hover:shadow-emerald-500/50 active:shadow-sm">
  Guardar cambios
</button>

Campo de formulario con foco

<input
  type="text"
  placeholder="Buscar..."
  class="w-full rounded-lg border border-gray-300 px-4 py-2 shadow-sm transition-shadow duration-150 focus:shadow-md focus:ring-2 focus:ring-blue-500 focus:outline-none"
/>

La transición suave entre los distintos niveles de sombra refuerza la sensación de profundidad y comunica al usuario que el elemento responde a su interacción.