Editor HTML CSS JS y generadores CSS (sombras, degradados)Beta

Acerca de Editor HTML CSS JS y generadores CSS (sombras, degradados)

Lo que escribes en los paneles HTML, CSS y JS se une en un único documento HTML unos 600 ms después de que dejas de teclear, y ese documento se carga en el iframe de vista previa mediante su atributo srcdoc. El CSS va en una etiqueta style dentro del head, el HTML forma el body y el JavaScript se coloca en una etiqueta script al final del body. Cuando tu script se ejecuta, todos los elementos que están por encima ya existen; por eso document.getElementById funciona aquí sin esperar al evento DOMContentLoaded.

La página incluye además cuatro generadores de CSS que antes eran herramientas aparte: box-shadow, border-radius, degradados y un editor de curvas cubic-bezier. Están en pestañas sobre el editor, de modo que puedes crear un valor, pegarlo en el panel CSS y verlo en un elemento real al momento. Abajo se explica cómo se aísla la vista previa del resto del sitio y cómo calcula el navegador cada propiedad que producen los generadores.

Cómo funciona el sandbox de la vista previa

El iframe de vista previa lleva sandbox=“allow-scripts allow-modals allow-forms allow-popups”. Falta a propósito allow-same-origin. Sin ese permiso, el documento recibe un origen opaco que no coincide con ningún sitio real, así que tu código de práctica no puede leer las cookies ni el almacenamiento de este sitio. MDN advierte que, si el contenido es del mismo origen, combinar allow-scripts con allow-same-origin permite al documento incrustado borrar su propio atributo sandbox, lo que equivale a no tener sandbox.

En la práctica, localStorage, sessionStorage y document.cookie fallan o no guardan nada dentro de la vista previa. No es un error de tu código, es el aislamiento. Si quieres probar persistencia, usa “Guardar como archivo HTML” y abre la descarga directamente. alert() y confirm() sí funcionan gracias a allow-modals, y window.open() o los enlaces con target=“_blank” se abren gracias a allow-popups. allow-forms permite enviar formularios.

El panel de consola se alimenta de un pequeño script puente que se inserta al principio del head, antes que tu código. Envuelve console.log, info, warn y error, escucha los errores no capturados y las promesas rechazadas sin manejar, y reenvía cada mensaje a la página principal con postMessage. La página principal comprueba que el mensaje venga del iframe actual y lleve el número de ejecución más reciente, de modo que un registro tardío de una ejecución anterior no se cuela en la nueva. Los números de línea de los errores se recalculan para que correspondan al panel JS y no al documento combinado.

Por qué un </script> literal rompe un script en línea

El analizador HTML no entiende JavaScript. Dentro de un elemento script lee texto sin interpretar hasta encontrar </script y cierra el elemento ahí mismo, aunque esa secuencia esté dentro de una cadena JS. Por eso const s = “</script>” en un script en línea lo corta por la mitad. Al montar el documento, el playground reescribe </script del panel JS como <\/script y </style del panel CSS como <\/style. La barra invertida no cambia nada para JavaScript y el analizador HTML ya no la reconoce como cierre. Necesitas el mismo escape siempre que incrustes un script en un HTML escrito a mano.

box-shadow: las capas se apilan de arriba abajo

box-shadow acepta una lista separada por comas, y la primera sombra de la lista se pinta encima. Cada capa se compone de desplazamiento x, desplazamiento y, radio de desenfoque, radio de expansión (spread), color y la palabra opcional inset. El desenfoque no puede ser negativo; un spread negativo encoge la sombra. Las sombras no cambian el tamaño de la caja, así que una sombra enorme no empuja a los elementos vecinos, aunque un antepasado con overflow: hidden puede recortarla.

Una profundidad creíble suele necesitar dos capas. Una sombra corta y oscura imita la zona de contacto justo debajo del objeto, y otra más larga y tenue imita la luz ambiental que se dispersa. Los preajustes de elevación siguen esa receta. Los de neumorfismo combinan una sombra gris en un lado y una blanca en el opuesto para que el elemento parezca surgir de la superficie; solo funciona si el color de fondo queda entre los dos tonos de sombra. El generador escribe siempre las cuatro longitudes, aunque valgan cero, y los colores siempre en rgba().

border-radius: qué pasa si los radios no caben

Cuando los radios que tocan un lado suman más que la longitud de ese lado, CSS Backgrounds Level 3 multiplica todos los radios por un mismo factor f = min(longitud del lado ÷ suma de los dos radios de ese lado). En una caja de 200×100 px con border-radius: 100px, los lados verticales miden 100 px pero soportan 200 px de radio, así que f = 0,5 y cada esquina queda en 50 px: una píldora. Con border-radius: 50%, el radio horizontal es la mitad del ancho y el vertical la mitad del alto, y la misma caja se convierte en un óvalo. Por eso para botones en forma de píldora se usa un valor grande en px y no 50%.

La barra separa los radios horizontales de los verticales. El preajuste de forma orgánica (blob) aleatoriza los ocho valores. Cuando hay valores repetidos, el generador los abrevia con las mismas reglas de uno a cuatro valores que usan margin y padding.

En qué espacio de color se mezcla un degradado

Un degradado lineal de #ff0000 a #00ff00 pasa por #808000 en el centro, un verde oliva apagado, porque los canales se promedian en sRGB codificado con gamma. El generador usa la misma cuenta cuando insertas una parada entre otras dos. CSS Color Level 4 mantiene sRGB como espacio por defecto si todos los colores usan la sintaxis clásica (hex, rgb()), y CSS Images Level 4 añade una indicación explícita, por ejemplo linear-gradient(in oklch, …). Si el centro de un degradado entre dos tonos lejanos se ve grisáceo, prueba oklab u oklch en los navegadores que lo admitan.

Cuando interviene la transparencia, los navegadores interpolan en forma premultiplicada: cada color se multiplica por su alfa antes de mezclarse. Por eso un degradado de rojo a rgba(0,0,0,0) pasa por un rojo semitransparente y no por un marrón oscuro, aunque el extremo transparente sea técnicamente negro. El generador de degradados mezcla igual al insertar una parada con un clic, así que a medio camino entre rojo y transparente inserta rgba(255, 0, 0, 0.5).

cubic-bezier: cómo leer los cuatro números

cubic-bezier(x1, y1, x2, y2) define los dos puntos de control de una curva fija entre (0, 0) y (1, 1). El eje x es el tiempo y el eje y el progreso. Según CSS Easing Level 1, los dos valores x deben estar en [0, 1] o la declaración es inválida; los valores y pueden ser cualquiera. Una y mayor que 1 hace que la animación se pase del objetivo y vuelva, y una y menor que 0 hace que retroceda antes de arrancar. Al arrastrar, el editor mantiene los puntos dentro del gráfico visible (y entre -0,8 y 1,9) para que no se salgan del lienzo; los valores mayores escritos en los campos numéricos o pegados se usan tal cual, sin recortarlos.

• ease = cubic-bezier(0.25, 0.1, 0.25, 1), valor por defecto de transition-timing-function
• ease-in = cubic-bezier(0.42, 0, 1, 1)
• ease-out = cubic-bezier(0, 0, 0.58, 1)
• ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)
• linear = cubic-bezier(0, 0, 1, 1)

Ejemplos

Cómo se usa

1. Elige el editor o una de las pestañas de generador CSS.
2. Edita el código; la vista previa y la consola se actualizan poco después de que pares. Copia la salida del generador al panel CSS.
3. Comparte con un enlace o descarga el resultado como archivo HTML independiente.

Preguntas frecuentes