text-shadow

Ejemplos

Ejemplo básico

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

<p class="text-shadow-2xs ...">El rápido zorro marrón...</p>
<p class="text-shadow-xs ...">El rápido zorro marrón...</p>
<p class="text-shadow-sm ...">El rápido zorro marrón...</p>
<p class="text-shadow-md ...">El rápido zorro marrón...</p>
<p class="text-shadow-lg ...">El rápido zorro marrón...</p>

Cambiando la opacidad

Usa el modificador de opacidad para ajustar la opacidad de la sombra del texto:

<p class="text-shadow-lg ...">El rápido zorro marrón...</p>
<p class="text-shadow-lg/20 ...">El rápido zorro marrón...</p>
<p class="text-shadow-lg/30 ...">El rápido zorro marrón...</p>

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

Estableciendo el color de la sombra

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

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Reservar una demo</button>
<button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">Ver precios</button>

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

Eliminando una sombra de texto

Usa la utilidad text-shadow-none para eliminar una sombra de texto existente de un elemento:

<p class="text-shadow-lg dark:text-shadow-none">
  <!-- ... -->
</p>

Usando un valor personalizado

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

<p class="text-shadow-[0_35px_35px_rgb(0_0_0_/_0.25)] ...">
  Lorem ipsum dolor sit amet...
</p>

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

<p class="text-shadow-(--my-text-shadow) ...">
  Lorem ipsum dolor sit amet...
</p>

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

Responsive design

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

<p class="text-shadow-none md:text-shadow-lg ...">
  Lorem ipsum dolor sit amet...
</p>

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

Personalizando tu tema

Personalizando sombras de texto

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

@theme {
  --text-shadow-xl: 0 35px 35px rgb(0, 0, 0 / 0.25); 
}

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

<p class="text-shadow-xl">
  Lorem ipsum dolor sit amet...
</p>

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 la utilidad text-shadow-regal-blue puede ser usada en tu marcado:

<p class="text-shadow-regal-blue">
  Lorem ipsum dolor sit amet...
</p>

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