Generador de Text Shadow CSS
Generador online gratuito de text-shadow CSS. Apila varias capas de sombra con desplazamiento, desenfoque, color y opacidad, prueba presets como Neón, 3D o Retro y copia el CSS al instante.
¿Qué es la propiedad text-shadow de CSS?
text-shadow añade efectos de sombra a los glifos del texto. Cada sombra se define con un desplazamiento horizontal, uno vertical, un radio de desenfoque opcional y un color, y varias sombras se pueden combinar en un solo valor separado por comas para crear efectos ricos.
¿Cómo funcionan las múltiples capas de sombra?
Las capas se dibujan de abajo hacia arriba en el orden en que se declaran, así que la primera sombra de la lista queda encima de las demás. Este generador permite añadir, eliminar, activar y desactivar capas, cada una con su propio desplazamiento, desenfoque, color y opacidad para apilar efectos como Neón o 3D.
¿Qué significan el desplazamiento X, el Y y el desenfoque?
El desplazamiento X mueve la sombra a izquierda o derecha de los glifos, el Y la mueve arriba o abajo, y el radio de desenfoque suaviza sus bordes: 0 da un borde duro como en los estilos Retro o Contorno, mientras que valores mayores difuminan el color como un resplandor.
¿Cómo creo un efecto de neón?
Usa el preset Neón o configura varias capas con desplazamiento cero, el mismo color brillante y valores de desenfoque crecientes, por ejemplo 0 0 3px, 0 0 8px y 0 0 20px. Los halos apilados simulan el brillo de un tubo de neón.
¿Afecta text-shadow al rendimiento del renderizado?
Algunas capas estáticas son baratas, pero el texto con muchas sombras de gran desenfoque cuesta más repintarlo. Aplicar sombras pesadas a párrafos largos o animar text-shadow de forma continua puede provocar caídas de fotogramas en dispositivos móviles o de gama baja; prefiere títulos cortos, desenfoques moderados o anima la opacidad en su lugar.
¿Cómo hago una sombra semitransparente?
Cada capa tiene un deslizador de opacidad que convierte el color elegido a notación rgba, por ejemplo rgba(0, 0, 0, 0.5). Las sombras semitransparentes se funden con cualquier fondo, como hace el preset Papel para un aspecto de impresión suave.
¿Qué diferencia hay entre text-shadow y box-shadow?
text-shadow se aplica a la forma de los glifos del texto y no tiene valores de extensión ni de interior, mientras que box-shadow rodea la caja rectangular de cualquier elemento. Comparten la sintaxis de desplazamiento y desenfoque, pero ninguna sustituye a la otra.
¿Qué navegadores admiten text-shadow?
text-shadow funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera, y lleva más de una década estable y sin prefijos. Las sombras multicapa se comportan igual en todos ellos.
¿Se sube a un servidor lo que escribo?
No. El texto de vista previa y todas las capas que configures permanecen en tu navegador y el CSS se genera localmente en la página. No se envía nada por la red, por lo que la herramienta también funciona sin conexión una vez cargada.
Cómo usar Generador de Text Shadow CSS
Diseña sombras de texto CSS apilando capas en lugar de adivinar un único desplazamiento. Cada cambio se muestra en un texto de vista previa grande y en vivo, y el CSS se genera localmente en tu navegador.
- Escribe tus propias palabras en el campo Texto de vista previa para probar el efecto con texto real.
- Prueba un preajuste: Neón, Papel, 3D, Retro, Resplandor o Contorno carga capas listas.
- Ajusta el desplazamiento X, el desplazamiento Y, el desenfoque, el color y la opacidad de cada capa con sus deslizadores.
- Usa Añadir capa para apilar más sombras, desmarca una capa para desactivarla, o bórrala con el icono de papelera.
- Copia la regla text-shadow generada y pégala en tu hoja de estilos.
Los resplandores de neón lucen mejor con tres o cuatro capas del mismo color y un desenfoque creciente — mantén los desplazamientos en cero y deja que el desenfoque haga el trabajo.
Herramientas relacionadas
- Generador de Box Shadow CSS Generador online gratuito de box-shadow CSS. Crea sombras hermosas visualmente con desplazamiento, desenfoque, extensión, color e inset ajustables. Vista previa en vivo y copia instantánea.
- Generador de Gradientes CSS Crea impresionantes gradientes CSS visualmente. Genera gradientes lineales, radiales y cónicos con múltiples paradas de color, ángulos y posiciones. Copia código CSS listo para producción.
- Generador de Textos Animados Generador de textos animados gratuito con 28 estilos Unicode. Crea texto en negrita, cursiva, gótico y circulado para biografías de Instagram, TikTok, WhatsApp y nicks de juegos.
- Generador de Border Radius Creativo Generador de border radius creativo gratuito en línea. Arrastra 8 puntos o elige una forma blob para crear figuras CSS orgánicas y copiar el código al instante.
- Convertidor de Color Convertidor de color online gratuito. Convierte formatos HEX, RGB, HSL, HSV al instante con selector visual. 100% privado, funciona en tu navegador.
- Generador de Easing CSS Generador online gratuito de easing CSS. Arrastra los puntos de control de cubic-bezier en una curva interactiva, elige entre 18 presets, mira una animación de bola en bucle y copia la función de temporización al instante.
- Generador de Clip Path CSS Generador online gratuito de clip-path CSS. Diseña formas polygon, circle, ellipse e inset con puntos arrastrables, vista previa en vivo y copia del código CSS en un clic.
- Embellecedor CSS Formatea y embellece código CSS al instante. Convierte CSS minificado en código legible y bien indentado con opciones personalizables.