Generador de Sombra de Texto CSS con Vista Previa en Vivo
Este generador de sombra de texto construye la propiedad CSS text-shadow de forma visual, así que puedes diseñar una sombra con controles deslizantes y un selector de color en lugar de adivinar los valores a mano. Ajusta el desplazamiento, el desenfoque, el color y la opacidad, y observa cómo la vista previa en vivo se actualiza al instante mientras trabajas.
Está pensado para desarrolladores front-end y diseñadores que quieren una sombra sutil para mejorar la legibilidad, un brillo neón, un aspecto 3D en capas o un contorno de texto limpio. Apila tantas capas de sombra como quieras, parte de un preset integrado y copia el CSS listo para producción con un solo clic.
Cómo Usar el Generador de Sombra de Texto
Ajusta los controles de la sombra
Cada capa tiene cinco controles: Desplazamiento X (-50 a 50px), Desplazamiento Y (-50 a 50px), Desenfoque (0 a 100px), Color mediante el selector o hex, y Opacidad (0% a 100%). Arrastra los controles deslizantes y la vista previa reacciona en tiempo real.
Agrega más capas
Haz clic en Agregar capa para apilar sombras adicionales y lograr efectos como brillo neón o fuego. Usa el icono del ojo para activar o desactivar una capa, y el icono de eliminar para borrarla.
Prueba un preset
Elige cualquiera de los ocho presets — Suave, Brillo neón, Retro 3D, Relieve, Contorno, Sombra larga, Fuego o Vintage — para cargar un efecto listo y luego ajustarlo con los controles deslizantes.
Personaliza la vista previa
Haz clic en el texto de vista previa para escribir tus propias palabras y luego define el tamaño de fuente (24 a 120px), el color del texto, el color de fondo y la familia tipográfica (sans-serif, serif, monospace o cursive) para que combinen con tu diseño.
Copia el CSS
La propiedad text-shadow generada aparece en un bloque de código. Haz clic en Copiar para enviarla al portapapeles y pegarla directamente en tu hoja de estilos.
Funciones
Sombras en Varias Capas
Apila tantas capas de sombra como necesites, cada una con su propio desplazamiento, desenfoque, color y opacidad. Activa o desactiva capas individuales para comparar sin perder los ajustes.
Controles Visuales
Controles deslizantes precisos para el desplazamiento X/Y, el desenfoque y la opacidad, además de un selector de color con entrada hex para una coincidencia de color exacta.
Vista Previa en Vivo
Cada cambio se renderiza al instante sobre el texto de vista previa editable, así ves el resultado real antes de copiar una sola línea de código.
8 Presets Integrados
Parte de Suave, Brillo neón, Retro 3D, Relieve, Contorno, Sombra larga, Fuego o Vintage, y luego personaliza cada uno a tu gusto.
Vista Previa Personalizable
Edita el texto, define el tamaño de fuente de 24 a 120px, cambia los colores del texto y del fondo, y alterna entre fuentes sans-serif, serif, monospace y cursive.
Exportar Código con un Clic
El CSS text-shadow limpio y separado por comas queda listo en un bloque de código — cópialo al portapapeles con un solo clic.
Restablecer a Valores Predeterminados
Borra todas las capas y los ajustes de vista previa para volver a una única sombra predeterminada siempre que quieras empezar de nuevo.
Funciona Por Completo en el Navegador
Sin cuentas, sin subir archivos, sin rastreo. Todo ocurre de forma local, así que tu texto y tus estilos se quedan en tu dispositivo.
Preguntas Frecuentes
¿Cómo agrego una sombra de texto en CSS?
Aplica la propiedad text-shadow a un elemento de texto. Cada sombra se escribe como offset-x offset-y blur-radius color, por ejemplo text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);. Con este generador defines esos valores en los controles deslizantes y copias la propiedad terminada directamente en tu CSS.
¿Qué significan los valores de text-shadow?
El primer valor es el desplazamiento horizontal, el segundo es el desplazamiento vertical, el tercero es el radio de desenfoque (qué tan suave se ve la sombra) y el último es el color. Cuanto mayores son los desplazamientos, más se aleja la sombra del texto; un desenfoque más alto la expande y la suaviza. En esta herramienta, la opacidad se incorpora al color como un valor alfa de rgba().
¿Cómo agrego varias sombras de texto?
La propiedad CSS text-shadow admite varias sombras separadas por comas. Haz clic en Agregar capa para apilar tantas como quieras — no hay un límite fijo. Los efectos sencillos usan una o dos capas, mientras que un brillo neón normalmente usa tres o cuatro capas superpuestas.
¿Cómo creo un efecto de brillo o texto neón?
Carga el preset Brillo neón como punto de partida. Apila varias capas con desplazamiento cero y desenfoque creciente en el mismo color brillante, lo que crea el halo suave de un brillo. Cambia la vista previa a un fondo oscuro y luego ajusta el color y el desenfoque para subir o bajar la intensidad.
¿Cómo hago texto 3D o con contorno usando text-shadow?
Para un aspecto 3D, usa el preset Retro 3D o Sombra larga, que apilan capas con desplazamiento y desenfoque cero para crear sensación de profundidad. Para un contorno, usa el preset Contorno: coloca cuatro sombras — izquierda, derecha, arriba y abajo — cada una con desenfoque cero para trazar el borde de cada letra. Aumenta los valores de desplazamiento para un contorno más grueso.
¿Cuál es la diferencia entre text-shadow y box-shadow?
text-shadow aplica la sombra a los glifos del propio texto, así que sigue la forma de cada letra. box-shadow aplica la sombra a la caja rectangular del elemento. Usa este generador para efectos tipográficos; usa una herramienta de box-shadow cuando quieras una sombra alrededor de una tarjeta o un botón.
¿Por qué mi sombra se ve diferente con distintos tamaños de fuente?
Los valores de la sombra están en píxeles, que son unidades absolutas, así que una sombra de 4px se ve proporcionalmente más grande en un texto de 24px que en uno de 120px. Usa el control de tamaño de fuente para ver tu sombra al tamaño que realmente vas a publicar, y ajusta el desplazamiento y el desenfoque en consecuencia.
Aún no hay comentarios. ¡Sé el primero en comentar!