Crea text-shadow CSS con controles deslizantes y vista previa de texto en vivo
CSS text-shadow añade una o más sombras a un texto, definidas por desplazamiento horizontal, vertical, radio de desenfoque y color. Una sola sombra bien ajustada hace que los titulares destaquen sobre una imagen de fondo; apilar varias sombras crea efectos de brillo neón, letterpress, sombra larga o extrusión 3D — completamente en CSS, sin imágenes ni filtros SVG.
Este generador proporciona una vista previa en vivo con controles para cada capa de sombra: arrastra los controles de desplazamiento o escribe valores directamente, ajusta el desenfoque, elige un color con canal alfa y activa/desactiva capas. La salida es una declaración CSS text-shadow lista para pegar.
text-shadow: offset-x offset-y blur-radius color. El blur-radius es opcional (por defecto 0 = borde duro). El color puede ir antes o después de los desplazamientos.
Sí. Establecer blur-radius a 0 da una sombra con borde nítido. Esta es la base de los efectos de sombra larga y retro 8-bit, donde se apilan muchas sombras sin desenfoque en la misma dirección.
Sí — text-shadow se aplica al contenido de texto de los pseudo-elementos igual que al texto real.
No. text-shadow se aplica solo a los glifos del texto; box-shadow se aplica a toda la caja del elemento. text-shadow no admite la palabra clave inset.
Generador de sombra de caja CSS · Generador de radio de borde CSS · Generador de Flexbox · Generador de CSS Grid · Generador de animaciones CSS · Generador de filtros CSS