DocsBlogGaleríaSociosPlus
  1. Efectos
  2. box-shadow

Efectos

box-shadow

Utilidades para controlar la sombra de caja de un elemento.

ClaseEstilos
shadow-2xs
box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */
shadow-xs
box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */
shadow-sm
box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */
shadow-md
box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */
shadow-lg
box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */
shadow-xl
box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */
shadow-2xl
box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */
shadow-none
box-shadow: 0 0 #0000;
shadow-(<custom-property>)
box-shadow: var(<custom-property>);
shadow-(color:<custom-property>)
--tw-shadow-color: var(<custom-property>);

Ejemplos

Ejemplo básico

Utiliza utilidades como shadow-sm and shadow-lg para aplicar sombras de caja exteriores de diferentes tamaños a un elemento:

shadow-md

shadow-lg

shadow-xl

<div class="shadow-md ..."></div><div class="shadow-lg ..."></div><div class="shadow-xl ..."></div>

Cambiar la opacidad

Utiliza el modificador de opacidad para ajustar la opacidad de la sombra de caja:

shadow-xl

shadow-xl/20

shadow-xl/30

<div class="shadow-xl ..."></div><div class="shadow-xl/20 ..."></div><div class="shadow-xl/30 ..."></div>

Las opacidades predeterminadas de la sombra de caja son bastante bajas (25% o menos), por lo que aumentar la opacidad (por ejemplo, al 50%) hará que las sombras de caja sean más pronunciadas.

Establecer el color de la sombra

Utiliza utilidades como shadow-indigo-500 y shadow-cyan-500/50 para cambiar el color de una sombra de caja:

shadow-cyan-500/50

shadow-blue-500/50

shadow-indigo-500/50

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Suscribirse</button><button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Suscribirse</button><button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Suscribirse</button>

Por defecto, las sombras de colores tienen una opacidad del 100%, pero puedes ajustarla usando el modificador de opacidad.

Añadir una sombra interior (inset)

Utiliza utilidades como inset-shadow-xs y inset-shadow-sm para aplicar una sombra de caja interior a un elemento:

inset-shadow-2xs

inset-shadow-xs

inset-shadow-sm

<div class="inset-shadow-2xs ..."></div><div class="inset-shadow-xs ..."></div><div class="inset-shadow-sm ..."></div>

Puedes ajustar la opacidad de una sombra interior usando el modificador de opacidad, como inset-shadow-sm/50. Las opacidades predeterminadas de la sombra interior son bastante bajas (5%), por lo que aumentar la opacidad (por ejemplo, al 50%) hará que las sombras interiores sean más pronunciadas.

Establecer el color de la sombra interior

Utiliza utilidades como inset-shadow-indigo-500 y inset-shadow-cyan-500/50 para cambiar el color de una sombra de caja interior:

inset-shadow-indigo-500

inset-shadow-indigo-500/50

<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div><div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

Por defecto, las sombras de colores tienen una opacidad del 100%, pero puedes ajustarla usando el modificador de opacidad.

Añadir un anillo (ring)

Utiliza utilidades ring o ring-<number> como ring-2 y ring-4 para aplicar una sombra de caja sólida a un elemento:

ring

ring-2

ring-4

<button class="ring ...">Suscribirse</button><button class="ring-2 ...">Suscribirse</button><button class="ring-4 ...">Suscribirse</button>

Por defecto, los anillos coinciden con el currentColor del elemento al que se aplican.

Establecer el color del anillo

Utiliza utilidades como ring-indigo-500 y ring-cyan-500/50 para cambiar el color de un anillo:

ring-blue-500

ring-blue-500/50

<button class="ring-2 ring-blue-500 ...">Suscribirse</button><button class="ring-2 ring-blue-500/50 ...">Suscribirse</button>

Por defecto, los anillos tienen una opacidad del 100%, pero puedes ajustarla usando el modificador de opacidad.

Añadir un anillo interior (inset ring)

Utiliza utilidades inset-ring o inset-ring-<number> como inset-ring-2 y inset-ring-4 para aplicar una sombra de caja interior sólida a un elemento:

inset-ring

inset-ring-2

inset-ring-4

<button class="inset-ring ...">Suscribirse</button><button class="inset-ring-2 ...">Suscribirse</button><button class="inset-ring-4 ...">Suscribirse</button>

Por defecto, los anillos interiores coinciden con el currentColor del elemento al que se aplican.

Establecer el color del anillo interior

Utiliza utilidades como inset-ring-indigo-500 y inset-ring-cyan-500/50 para cambiar el color de un anillo interior:

inset-ring-blue-500

inset-ring-blue-500/50

<button class="inset-ring-2 inset-ring-blue-500 ...">Suscribirse</button><button class="inset-ring-2 inset-ring-blue-500/50 ...">Suscribirse</button>

Por defecto, los anillos interiores tienen una opacidad del 100%, pero puedes ajustarla usando el modificador de opacidad.

Eliminar una sombra de caja

Utiliza las utilidades shadow-none, inset-shadow-none, ring-0 e inset-ring-0 para eliminar una sombra de caja existente de un elemento:

shadow-none

<div class="shadow-none ..."></div>

Usar un valor personalizado

Usa utilidades como shadow-[<value>],inset-shadow-[<value>],ring-[<value>], y inset-ring-[<value>] para establecer el/la sombra de caja basándose en un valor completamente personalizado:

<div class="shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">  <!-- ... --></div>

Para variables CSS, también puedes usar la sintaxis shadow-(<custom-property>) :

<div class="shadow-(--my-shadow) ...">  <!-- ... --></div>

Esto es solo un atajo para shadow-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad box-shadow el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="shadow-none md:shadow-lg ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar el tema

Personalizar sombras

Usa las variables de tema --shadow-* para personalizar las utilidades de sombra de caja en tu proyecto:

@theme {  --shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }

Ahora se puede usar la utilidad shadow-3xl en tu marcado:

<div class="shadow-3xl">  <!-- ... --></div>

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.

Personalizar sombras interiores

Usa las variables de tema --inset-shadow-* para personalizar las utilidades de sombra de caja interior en tu proyecto:

@theme {  --inset-shadow-md: inset 0 2px 3px rgba(0, 0, 0, 0.25); }

Ahora se puede usar la utilidad inset-shadow-md en tu marcado:

<div class="inset-shadow-md">  <!-- ... --></div>

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.

Personalizar colores de sombra

Usa las variables de tema --color-* para personalizar las utilidades de color en tu proyecto:

@theme {  --color-regal-blue: #243c5a; }

Ahora se pueden usar utilidades como shadow-regal-blue,inset-shadow-regal-blue,ring-regal-blue, y inset-ring-regal-blue en tu marcado:

<div class="shadow-regal-blue">  <!-- ... --></div>

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.

En esta página

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas