Generador de sombra de texto CSS: neón, 3D, sombra larga + Tailwind | We.Inc
Crea sombras de texto CSS por capas con vista previa en vivo. Parte de presets de neón, 3D, sombra larga, letterpress o contorno, y copia el CSS o una clase de Tailwind.
Generador de sombra de texto CSS
La propiedad CSS text-shadow recibe un desplazamiento x, un desplazamiento y, un radio de desenfoque opcional y un color, por ejemplo text-shadow: 0 2px 6px rgb(0 0 0 / 0.25). Separa varias sombras con comas para apilarlas, que es como se crean los brillos de neón y las letras en 3D. Crea una abajo y copia el CSS o la clase de Tailwind.
Los cuatro valores de una sombra
Valor
Ejemplo
Efecto
Desplazamiento x
Mueve la sombra a la derecha (negativo: a la izquierda)
Desplazamiento y
Mueve la sombra hacia abajo (negativo: hacia arriba)
Radio de desenfoque
Suaviza el borde; 0 da una copia nítida
rgb(0 0 0 / 0.25)
Cualquier color CSS; por defecto, el color del texto
Apila tantas capas como quieras, cambia el texto, el tamaño de fuente y los colores, y mira cómo se actualiza la vista previa. El resultado es CSS puro que funciona en todos los navegadores actuales, además de una clase de Tailwind para los proyectos que lo usan.
Elige un preset o empieza con una sola sombra suave.
Edita los desplazamientos, el desenfoque, el color y la opacidad de cada capa, o añade y quita capas. Las capas que aparecen primero se dibujan encima.
Cambia el texto de la vista previa, el tamaño, el grosor y los colores para que encajen con tu diseño.
Copia la declaración CSS o la clase de propiedad arbitraria de Tailwind.
Las sombras no cuentan en las comprobaciones de contraste. Asegúrate de que el texto cumple contra su fondo sin la sombra y añade la sombra como toque final.
Para texto blanco sobre una foto recargada, una sombra oscura suave ayuda más a la lectura que una nítida. Combínala con una capa oscura sobre la imagen para que sea realmente legible.
Los radios de desenfoque grandes en muchas capas cuestan tiempo de pintado, y animarlos cuesta más. Reserva los brillos intensos para los titulares, no para el texto normal.
Una sombra clara de 1px bajo texto gris sobre fondo gris da el aspecto hundido de letterpress; invierte el desplazamiento para un texto en relieve.
Preguntas frecuentes
¿Cómo hago texto neón en CSS?
Usa texto claro con varias sombras del mismo color brillante, sin desplazamiento y con desenfoque creciente: un brillo blanco ajustado y luego brillos de 12px, 24px y 48px en el color de acento. Ponlo sobre un fondo oscuro. El preset Neón es un buen punto de partida.
¿Admite text-shadow el spread como box-shadow?
No. text-shadow no tiene valor de spread ni la palabra clave inset. Para simular un contorno más grueso, apila varias sombras nítidas desplazadas un píxel en cada dirección, como hace el preset Contorno, o usa -webkit-text-stroke.
¿Cómo añado una sombra de texto en Tailwind?
Tailwind 4.1 y posteriores incluyen utilidades de text-shadow como text-shadow-sm y text-shadow-lg. Para una sombra personalizada en cualquier versión, usa una propiedad arbitraria como [text-shadow:0_2px_6px_rgb(0_0_0/0.25)], donde los guiones bajos representan espacios. El generador escribe esa clase por ti.
¿Por qué mi sombra se ve distinta en Safari?
Los navegadores rasterizan el desenfoque de forma ligeramente distinta, así que los desenfoques grandes pueden verse más suaves o más intensos según el motor. Las sombras nítidas sin desenfoque se ven igual en todas partes.
Cómo funciona el apilado
Cada sombra separada por comas se pinta detrás del texto, y la primera de la lista queda encima de las demás. Ese orden importa en los efectos 3D: pon primero la capa más cercana y clara, y al final la más lejana y oscura.
Las sombras largas son simplemente muchas capas idénticas desplazadas de píxel en píxel. Quedan llamativas en un titular grande, pero cada capa es un pintado más, así que mantén moderado el número de pasos.
Accesibilidad y movimiento
Las sombras pueden emborronar el texto pequeño y dificultar la lectura a personas con baja visión. Reserva los efectos decorativos para titulares grandes y mantén nítido el texto normal.
Si animas un brillo, envuelve la animación en una comprobación de prefers-reduced-motion para que quienes han pedido menos movimiento vean una versión estática.