Apila hasta cinco capas text-shadow, cada una con su desplazamiento, desenfoque, opacidad y color, y comprueba el resultado sobre un texto de muestra. Copiar CSS deja el bloque .shadowed-text en el portapapeles.
Se ejecuta localmente en tu navegadorHasta cinco capas text-shadow se apilan en una vista previa: el texto, el tamaño (24-120 px) y el peso (400/600/800/900), los colores de texto y fondo y, por capa, el desplazamiento horizontal y vertical (60 px por lado), el desenfoque (0-100 px), la opacidad (0-1) y el color. Cada pulsación redibuja el escenario y el panel de código contiene exactamente la cadena que Copiar CSS pone en el portapapeles.
La página abre con dos capas: 2px 3px 0px rgba(54, 217, 138, 0.9) sobre 6px 8px 18px rgba(6, 29, 20, 0.55), con VoriTools a 64 px y peso 800. La salida es un bloque .shadowed-text con una línea de sombra por capa; la primera capa de la lista se pinta encima.
La salida imprime una línea de sombra por capa, unidas por coma y salto de línea, bajo el selector fijo .shadowed-text y junto al valor del selector de color: color: #f7fff9 y text-shadow: 2px 3px 0px rgba(54, 217, 138, 0.9), 6px 8px 18px rgba(6, 29, 20, 0.55) en una página intacta.
El orden se ve. En la prueba de píxeles dos capas compartían el mismo desplazamiento de 12 px y solo cambiaban de color: el rojo en primer lugar dibujó bordes rojos y, al intercambiar los colores, se vio el azul; la primera sombra de la lista queda encima.
El desplazamiento se limita a 60 px, el desenfoque a 0-100 px y la opacidad a 0-1. Mientras escribes la vista previa se mantiene dentro de esos límites; al salir, el valor limitado reescribe el campo: 999 en el desplazamiento horizontal guarda 60 px y -10 en el desenfoque guarda 0 px.
El selector de color entrega un valor hex y la opacidad se convierte en el canal alfa: #123456 con 0,5 exporta rgba(18, 52, 86, 0.5). Un desenfoque de 0 imprime una copia dura del glifo, como hace la capa inicial 2px 3px 0px.
Solo el apilado de sombras y el color del texto llegan a la salida: el texto de la vista previa, su tamaño y peso y el fondo del escenario se quedan en el escenario. Cada capa lleva un solo color, así que no hay degradado ni valor spread por capa, ni sombra interior, ni modo de filtro drop-shadow().
Todo ocurre en la página: escribir, añadir y eliminar capas, Copiar CSS y Restablecer no enviaron ninguna petición de red en la prueba (en y ja); la única petición ajena es la etiqueta de analítica compartida. El selector exportado es siempre .shadowed-text.