CSSTools
La propiedad CSS text-shadow añade uno o más efectos de sombra a los caracteres de texto. Acepta una lista de sombras separadas por comas, lo que permite crear efectos de neón, 3D y en capas con una sola propiedad.
text-shadow: offsetX offsetY blur color; /* Efecto de neón con capas múltiples */ text-shadow: 0 0 7px #fff, 0 0 20px #7c6fff, 0 0 45px #7c6fff;
/* Sombra sutil */ text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Efecto 3D */ text-shadow: 2px 2px 0 #000, 4px 4px 0 rgba(0,0,0,0.5); /* Resplandor */ text-shadow: 0 0 20px rgba(124,111,255,0.8);
Sí. text-shadow acepta una lista de sombras separadas por comas. Se renderizan de la última a la primera, con la primera sombra encima.
text-shadow se aplica solo al texto. filter: drop-shadow() se aplica a los píxeles visibles de cualquier elemento. Para texto puro, text-shadow es más eficiente.
Las sombras múltiples con valores de blur grandes pueden afectar el rendimiento. Para animaciones, considera usar filter: drop-shadow() que está acelerado por hardware.