Softonic

Generador de Sombra de Texto CSS

Paso 1 / 2
Generar CSS

Construir una declaración de text-shadow a ojo en DevTools funciona, pero se convierte en un juego de adivinanzas en el momento en que necesitas un resplandor neumórfico suave, una sombra paralela retro de dos capas o un contorno nítido de 1px en un encabezado principal. Este generador te permite ajustar el desplazamiento X, el desplazamiento Y, el radio de desenfoque y un color RGBA y copiar una línea CSS lista para pegar.

Cómo construir una sombra de texto

  1. 1

    Establecer los desplazamientos

    X es el desplazamiento horizontal en píxeles, Y es vertical. Y positivo empuja la sombra hacia abajo, Y negativo la empuja hacia arriba.

  2. 2

    Elegir el radio de desenfoque

    Un desenfoque de 0 da una silueta dura; valores más altos desvanecen la sombra. Las sombras suaves típicas usan de 4 a 12px de desenfoque.

  3. 3

    Elegir un color

    Usa una cadena RGBA para poder ajustar la opacidad. `rgba(0,0,0,0.35)` es un valor predeterminado seguro para una profundidad sutil en fondos claros.

  4. 4

    Copiar la declaración

    La herramienta genera `text-shadow: Xpx Ypx Blurpx color;`, pégalo en el selector correspondiente en tu hoja de estilos.

Recetas de sombra de texto que realmente se ven bien

Una sombra de texto es la suma de cuatro números y un color. Recuerda eso y podrás recrear casi cualquier efecto en una revista o página de destino.

Hoja de trucos

Efecto Declaración
Profundidad sutil text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Sombra suave text-shadow: 0 4px 12px rgba(0,0,0,0.35);
Contorno de 1px text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Doble retro text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Resplandor neón text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Capas de múltiples sombras

text-shadow acepta una lista separada por comas. El navegador dibuja con el algoritmo del pintor, en el orden del código: la última sombra de la lista queda detrás de todas las demás. Usa esto para simular contornos (cuatro sombras duras de 1px en las cuatro direcciones) o para construir profundidad apilando una sombra cercana nítida y una sombra lejana difusa.

Cuándo omitir text-shadow

  • En texto de cuerpo muy pequeño, un desenfoque superior a 2px hará que los glifos se vean borrosos. Prefiere -webkit-font-smoothing y un contraste más fuerte.
  • Para animaciones de la sección héroe críticas para el rendimiento, evita más de tres sombras apiladas; cada capa obliga al navegador a volver a rasterizar el texto.
  • Si necesitas una sombra con un desplazamiento ajustado en un camino complejo (curvas, rotaciones), considera un <filter> SVG con feDropShadow en su lugar, seguirá el contorno del glifo con más precisión.

Preguntas frecuentes

La salida es una sola capa de sombra por diseño. Para apilar efectos, ejecuta el generador varias veces y encadena los resultados con comas, por ejemplo text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow sigue los contornos de los glifos del texto renderizado. box-shadow sigue el borde rectangular del elemento. Toman parámetros similares pero rasterizan contra formas completamente diferentes.

Los navegadores rasterizan las sombras de texto contra la cuadrícula de píxeles del dispositivo. Una sombra con desenfoque 0 en una pantalla 2x se renderizará en posiciones subpíxel y puede verse un poco suave. Aumentar el desenfoque a 1 generalmente lo mejora sin cambiar el peso visual.

Los valores que ingresas se envían a nuestro servidor para construir la declaración, pero no se almacenan ni se reutilizan. En la vista de varios pasos viajan en el enlace entre pasos; en la vista de una sola página no se conserva nada, actualiza la página y todo se habrá ido.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Herramienta disponible en otros idiomas