Generador CSS de sombras de texto

Crea una pila de sombras de texto

1. Edita el texto de muestra y el desplazamiento horizontal y vertical, el radio de desenfoque, el color y la opacidad de cada capa activa. Los campos admiten centésimas y los controles deslizantes facilitan ajustes enteros.
2. Añade, duplica, desactiva, elimina o mueve capas. La primera capa activa aparece delante de las demás sombras. Las capas desactivadas conservan sus valores, pero se omiten del CSS.
3. Revisa el CSS y la vista nativa y selecciona Copiar CSS. Solo se copia la declaración de sombra; el texto, la tipografía y el fondo son contexto de la vista.

Entiende las capas creadas

Cada capa genera desplazamiento horizontal y vertical y desenfoque no negativo en píxeles CSS, seguidos de un color RGBA explícito. Los valores negativos mueven a la izquierda o hacia arriba; cero desenfoque produce una sombra nítida desplazada. La propiedad sigue los glifos y no la caja rectangular.

La primera sombra aparece delante de las posteriores, mientras que las sombras exteriores quedan detrás del texto. Mover capas puede cambiar los colores superpuestos. Esta pila es distinta de una cadena de filtros en la que cada operación recibe el resultado anterior.

La opacidad de la sombra se convierte en el alfa de su color. Por ejemplo, 37,5% se convierte exactamente en 0.375 sin cuantización alfa de ocho bits. La opacidad del texto es una opción independiente de la vista: el texto transparente puede conservar sombras visibles.

Una capa transparente activa permanece en la declaración. Desactivar todas las capas o vaciar la lista genera text-shadow: none;, que restablece explícitamente las sombras heredadas; una declaración vacía e inválida no lo sustituye.

Ejemplos de orden, color y transparencia

La primera capa del ejemplo usa -3.25px en horizontal, 6.5px en vertical y desenfoque 0px, con #336699 al 37%. Sus canales son 51, 102 y 153 y su alfa es 0.37. Una segunda capa naranja usa 0px, -2px, desenfoque 12px y 80%.

Al mover la capa naranja al primer lugar cambia el orden separado por comas sin modificar sus valores. La vista muestra la superposición; la herramienta no combina duplicados, ordena colores ni elimina capas invisibles.

Una capa negra transparente con desplazamiento y desenfoque cero es CSS válido aunque no se vea tinta de sombra. Al desactivarla se elimina de la pila; sin capas activas se genera la declaración none.

Límites de edición y vista previa

El editor admite hasta doce capas, desplazamientos de -64 a 64 píxeles CSS, desenfoque de 0 a 64, colores hexadecimales de seis dígitos y opacidad de 0 a 100%, con precisión de centésimas. Usa deliberadamente un subconjunto establecido sin extensión, inset, currentColor, unidades arbitrarias ni importación de CSS; las especificaciones más recientes tratan sintaxis adicional.

La muestra usa texto plano y una fuente local del sistema. La fuente de respaldo, los glifos, el tamaño y los saltos de línea afectan al aspecto. Solo se copia text-shadow, por lo que otra página puede verse distinta. No es una certificación de contraste, legibilidad ni igualdad de píxeles.

Las sombras no amplían el diseño del texto ni el área de desplazamiento. La zona con relleno es aproximada y sus bordes pueden recortar el desenfoque o los desplazamientos. El desplazamiento no garantiza ver todos los píxeles de la sombra.

Los valores inválidos de una capa activa eliminan el CSS y la muestra con estilo hasta que se corrigen. Los valores de capas desactivadas se ignoran hasta reactivarlas. Las opciones de vista inválidas solo ocultan la muestra; el texto vacío está permitido.

Estilos locales sin subir texto

La herramienta no añade cargas, fuentes remotas, historial de ajustes, enlaces con datos ni telemetría con tu muestra y ajustes. La copia es explícita. Los servicios existentes, las extensiones y las copias que conserves no están cubiertos por una promesa universal de privacidad o borrado.