filter: drop-shadow()

Ejemplos

Ejemplo básico

Usa utilidades como drop-shadow-sm y drop-shadow-xl para agregar una sombra (drop shadow) a un elemento:

<svg class="drop-shadow-md ...">
  <!-- ... -->
</svg>
<svg class="drop-shadow-lg ...">
  <!-- ... -->
</svg>
<svg class="drop-shadow-xl ...">
  <!-- ... -->
</svg>

Esto es útil para aplicar sombras a formas irregulares, como texto y elementos SVG. Para aplicar sombras a elementos regulares, probablemente quieras usar box shadow en su lugar.

Cambiando la opacidad

Usa el modificador de opacidad para ajustar la opacidad de la sombra (drop shadow):

<svg class="fill-white drop-shadow-xl ...">...</svg>
<svg class="fill-white drop-shadow-xl/25 ...">...</svg>
<svg class="fill-white drop-shadow-xl/50 ...">...</svg>

Las opacidades predeterminadas de las sombras (drop shadow) son bastante bajas (15% o menos), por lo que aumentar la opacidad (hasta un 50%, por ejemplo) hará que las sombras sean más pronunciadas.

Estableciendo el color de la sombra

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

<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg>
<svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>

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

Eliminando una sombra (drop shadow)

Usa la utilidad drop-shadow-none para eliminar una sombra (drop shadow) existente de un elemento:

<svg class="drop-shadow-lg dark:drop-shadow-none">
  <!-- ... -->
</svg>

Usando un valor personalizado

Usa la sintaxis drop-shadow-[<value>] para establecer el drop shadow basado en un valor completamente personalizado:

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

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

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

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

Responsive design

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

<svg class="drop-shadow-md md:drop-shadow-xl ...">
  <!-- ... -->
</svg>

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

Personalizando tu tema

Personalizando las sombras (drop shadows)

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

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

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

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

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

Personalizando los colores de las sombras

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

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

Ahora la utilidad drop-shadow-regal-blue puede ser usada en tu marcado:

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

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