box-shadow

Ejemplos

Ejemplo básico

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

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

Cambiando la opacidad

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

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

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

Estableciendo el color de la sombra

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

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

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

Agregando una sombra inset

Usa utilidades como inset-shadow-xs e inset-shadow-sm para aplicar una sombra de caja inset a un elemento:

<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 inset usando el modificador de opacidad, como inset-shadow-sm/50. Las opacidades predeterminadas de las sombras inset son bastante bajas (5%), por lo que aumentar la opacidad (a algo como 50%) hará que las sombras inset sean más pronunciadas.

Estableciendo el color de la sombra inset

Usa utilidades como inset-shadow-indigo-500 e inset-shadow-cyan-500/50 para cambiar el color de una sombra de caja inset:

<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.

Agregando un anillo

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

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

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

Estableciendo el color del anillo

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

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

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

Agregando un anillo inset

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

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

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

Estableciendo el color del anillo inset

Usa utilidades como inset-ring-indigo-500 e inset-ring-cyan-500/50 para cambiar el color de un anillo inset:

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

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

Eliminando una sombra de caja

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

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

Usando un valor personalizado

Usa utilidades como shadow-[<value>],inset-shadow-[<value>],ring-[<value>], y inset-ring-[<value>] para establecer el box shadow basado 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 agrega la función var() por ti automáticamente.

Diseño Responsive

Prefija una utilidad box-shadow con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Personalizando sombras

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

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

Ahora la utilidad shadow-3xl puede ser usada en tu marcado:

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

Aprende más sobre la personalización de tu tema en la documentación del tema.

Personalizando sombras inset

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

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

Ahora la utilidad inset-shadow-md puede ser usada en tu marcado:

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

Aprende más sobre la personalización de tu tema en la documentación del tema.

Personalizando colores de sombra

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

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

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

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

Aprende más sobre la personalización de tu tema en la documentación del tema.