Generador de Sombra de Texto CSS
Crea efectos de sombra de texto multicapa visualmente con vista previa en vivo.
① Ajusta offset y blur por capa ② Agrega múltiples capas de sombra ③ Copia el CSS
Preajustes:
Sombra 1
2px
2px
4px
30%
Código CSS
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
¿Qué es CSS text-shadow?
La propiedad CSS text-shadow añade una o más sombras al texto. Cada sombra se define por desplazamiento X, Y, radio de desenfoque y color — p.ej. text-shadow: 2px 2px 4px rgba(0,0,0,0.5). Múltiples capas se separan por comas para crear efectos complejos como glow, extrusión 3D y neon.
Preguntas Frecuentes
CSS text-shadow añade efectos de sombra al texto. Cada sombra requiere desplazamiento X, Y, radio de desenfoque y color. Múltiples sombras separadas por comas crean efectos en capas.
Sí. CSS text-shadow acepta una lista separada por comas de definiciones de sombras. Cada sombra se aplica en orden, con la primera apareciendo encima.
El radio de desenfoque controla cuán difusa es la sombra. Un valor de 0 da una sombra nítida. Valores mayores crean sombras más suaves. Valores muy grandes crean efectos de brillo.
Usa cuatro sombras con desenfoque 0, cada una desplazada en una dirección: text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black.
Apila múltiples sombras con desplazamientos X e Y crecientes del mismo color: text-shadow: 1px 1px #aaa, 2px 2px #aaa, 3px 3px #aaa.
Text-shadow está acelerado por GPU en los navegadores modernos. Radios de desenfoque grandes en texto muy largo pueden afectar el rendimiento en dispositivos de gama baja.
CSS text-shadow es compatible con todos los navegadores modernos desde 2010. No se requieren prefijos de proveedor.