Generador de Sombra de Texto CSS: Crea Sombras de Texto Visualmente
¿Necesitas profundidad, contorno o resplandor en los encabezados y texto? El CSS Text Shadow Generator te permite construir valores de text-shadow visualmente: establece el desplazamiento, desenfoque y color para cada sombra, añade múltiples sombras y copia el CSS con un clic.
Ejemplo: Elige la preconfiguración "Suave" para una sombra sutil, o "Resplandor" para un desenfoque sin desplazamiento. Usa "Contorno" para un efecto de contorno nítido, o "Capas" para una sombra más realista. Cambia el texto de vista previa y los colores para ver el efecto en tu copia. Copia el CSS y pégalo en tu hoja de estilos.
¿Qué es text-shadow?
text-shadow es una propiedad de CSS que dibuja una o más sombras detrás del texto. Estableces el desplazamiento horizontal y vertical, el radio de desenfoque y el color. A diferencia de box-shadow, text-shadow no tiene expansión ni inserción, solo desplazamiento, desenfoque y color. Múltiples sombras están separadas por comas y se apilan en orden.
¿Por qué usar un generador de sombras de texto?
Retroalimentación visual — Ve la sombra en el texto de muestra (y tu propio texto de vista previa) antes de copiar el código.
Múltiples sombras — Añade varias sombras para profundidad en capas o combina contorno y resplandor en una declaración.
Preconfiguraciones — Comienza desde Ninguna, Suave, Media, Dura, Contorno, Resplandor o Capas y ajusta desde allí.
Controles de vista previa — Edita el texto de vista previa y los colores de texto/fondo para probar la legibilidad y el contraste.
Sin registro — Gratis, del lado del cliente y funciona sin conexión una vez que se carga la página.
Cómo funciona la herramienta
- Usa la vista previa para ver la sombra de texto actual en el texto de muestra (edita el texto y los colores si lo deseas).
- Edita cada sombra: desplazamiento X/Y, desenfoque y color (selector o hex/rgba, incluyendo transparencia).
- Añade o elimina sombras para construir efectos en capas o combinados.
- Copia el CSS de la salida y pégalo en tu proyecto.
- Prueba las preconfiguraciones (por ejemplo, Resplandor, Contorno, Capas) para iniciar un estilo.
Sintaxis: text-shadow: offset-x offset-y blur-radius color; Múltiples sombras están separadas por comas.
Casos de uso
Encabezados y títulos — Sombra suave para profundidad o legibilidad en fondos ocupados.
Efecto de contorno — Desplazamiento pequeño sin desenfoque (o múltiples sombras) para sugerir un contorno.
Resplandor — Desplazamiento cero con gran desenfoque y color semitransparente.
Profundidad en capas — Múltiples sombras para una sombra de caída más realista.
Preguntas frecuentes
¿Cómo se diferencia text-shadow de box-shadow?
text-shadow se aplica solo al texto y no tiene expansión ni inserción, solo desplazamiento-x, desplazamiento-y, desenfoque y color. box-shadow se aplica a la caja del elemento y admite expansión e inserción. Usa text-shadow para efectos tipográficos y box-shadow para contenedores y tarjetas.
¿Puedo usar múltiples sombras?
Sí. Añade más sombras con “Añadir sombra.” Se apilan en orden; la primera está en la parte superior. Usa múltiples sombras para profundidad en capas o para combinar contorno y resplandor.
Prueba el CSS Text Shadow Generator
CSS Text Shadow Generator
Generate CSS text-shadow values visually. Set offset, blur, and color. Add multiple shadows and copy the CSS instantly.
The CSS Text Shadow Generator is free, works in your browser, and requires no sign-up. Set offset, blur, and color, add multiple shadows if you like, and copy the CSS with one click — perfect for headings, outlines, and glow effects.
Related Tools
- CSS Box Shadow Generator — Create box-shadow values for cards and panels
- CSS Border Radius Generator — Create border-radius values visually
- Gradient Generator — Create linear, radial, and conic CSS gradients
- Font Pairing — Preview and test typography combinations