Generador de sombra de texto CSS
Crea un text-shadow de forma visual: apila tantas capas como quieras, ajusta el desplazamiento, el desenfoque, el color y la opacidad, y previsualízalo con tus propias palabras, fuente y colores. Parte de ajustes como neón, 3D, contorno, retro y fuego, y copia un CSS limpio.
Última actualización:
Capas de sombra
La primera capa se dibuja encima.
Editar capa 1
Cómo usar Generador de sombra de texto CSS
- Elige un ajuste como Neón, 3D o Contorno, o parte de la sombra suave predeterminada.
- Escribe tu propio texto y ajusta la fuente, el tamaño, el grosor, el color del texto y el fondo para que coincidan con tu diseño.
- Selecciona una capa y ajusta su desplazamiento x e y, el desenfoque, el color y la opacidad. Añade más capas para brillo, profundidad o contornos.
- Reordena u oculta capas con los botones de flecha y de ojo para ver qué aporta cada una.
- Pulsa Copiar CSS y pega la regla en tu hoja de estilos.
Sintaxis de text-shadow
text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?
| Valor | Significado | Ejemplo |
|---|---|---|
| offset-x | Mueve la sombra a la derecha (positivo) o a la izquierda (negativo) | 2px |
| offset-y | Mueve la sombra hacia abajo (positivo) o hacia arriba (negativo) | 2px |
| blur-radius | Suaviza la sombra; 0 da una copia nítida del texto | 4px |
| color | Cualquier color CSS; por defecto es el color del texto | rgba(0, 0, 0, 0.3) |
Combina varias sombras con comas. La primera se pinta encima, así que pon primero las capas pequeñas y nítidas y al final los brillos grandes y suaves.
Recetas para efectos populares
| Efecto | Cómo se construye |
|---|---|
| Sombra sutil para legibilidad | 0 1px 2px rgba(0, 0, 0, 0.3) para texto claro sobre fotos |
| Neón | Texto claro sobre fondo oscuro, desplazamientos 0, desenfoque que se duplica de 4px a 80px, blanco cerca de las letras y un color vivo más lejos |
| 3D / extruido | Sombras nítidas desplazadas 1px, 2px, 3px… hacia abajo en grises algo más oscuros y luego unas cuantas sombras oscuras suaves para dar profundidad |
| Contorno | Ocho sombras nítidas desplazadas 1–2px en todas las direcciones, todas del color del contorno |
| Sombra larga | Docenas de sombras nítidas desplazadas 1px, 2px, 3px… en diagonal, en un tono más oscuro del fondo |
| Bajorrelieve | Texto algo más oscuro que el fondo más 0 1px 0 rgba(255, 255, 255, 0.75) |
| Anaglifo / glitch | Dos sombras nítidas, roja a la izquierda y cian a la derecha |
Consejos
- Usa colores rgba() para sombras naturales: una sombra negra con un 20–40% de opacidad combina con cualquier fondo.
- Los desenfoques grandes en títulos grandes quedan muy bien, pero mantén mínimas o nulas las sombras del texto principal para que se lea bien.
- text-shadow también se aplica a
::first-letter,::selectiony al texto SVG, y se puede animar con transiciones para brillos al pasar el cursor.
Preguntas frecuentes
¿Cuál es la sintaxis de text-shadow?
text-shadow: offset-x offset-y blur-radius color. Los dos desplazamientos son obligatorios; el desenfoque es opcional y por defecto es 0 (una copia nítida); el color por defecto es el color del texto. Separa varias sombras con comas.
¿Cómo añado varias sombras de texto?
Enuméralas en una sola declaración text-shadow separadas por comas, por ejemplo text-shadow: 0 0 5px #fff, 0 0 20px #ff00de. La primera sombra se dibuja encima y las siguientes debajo de ella.
¿Cómo hago un efecto de texto neón en CSS?
Usa texto de color claro sobre un fondo oscuro y apila varias sombras con desplazamiento 0 y desenfoque creciente: un pequeño brillo blanco (0 0 5px #fff) cerca de las letras y luego brillos de color a 10px, 20px, 40px y 80px. El ajuste Neón hace exactamente esto.
¿Se puede crear un contorno con text-shadow?
Sí. De cuatro a ocho sombras nítidas (desenfoque 0) desplazadas de 1 a 2px en todas las direcciones dibujan un contorno alrededor de las letras. Para contornos más gruesos o perfectamente uniformes, -webkit-text-stroke o paint-order con texto SVG pueden funcionar mejor.
¿Por qué text-shadow no tiene spread como box-shadow?
La especificación CSS define text-shadow sin spread ni inset. Para simular el spread, repite una sombra con el mismo color o apila varias copias nítidas desplazadas, como hace el ajuste Contorno.
¿Afecta text-shadow al rendimiento o a la accesibilidad?
Unas pocas sombras son baratas de renderizar, pero docenas de capas grandes con desenfoque sobre bloques de texto grandes pueden ralentizar el desplazamiento en dispositivos de gama baja. Las sombras también pueden reducir la legibilidad: mantén sutiles las sombras del texto principal y comprueba el contraste de color entre el texto y el fondo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.