Generador de box-shadow

Generador de box shadow: sombras CSS por capas

Elige un ajuste preestablecido, mueve un deslizador y mira la caja. Este generador de box shadow guarda hasta seis capas en una lista y escribe la declaración box-shadow completa mientras cambias valores. Al cargar la página ya está aplicado el ajuste «En capas», así que hay un resultado antes de tocar nada.

Lo que se queda en tu equipo

Los valores se convierten en CSS con JavaScript en la propia página. Pulsar un botón no envía ninguna petición, y la pestaña Red de las herramientas de desarrollo lo confirma. Los botones de copiar escriben en el portapapeles. La herramienta no guarda nada: al recargar vuelve el ajuste «En capas».

Siete puntos de partida

«Suave» es una sola sombra grande y pálida bajo una tarjeta blanca. «En capas» apila cinco capas con desplazamientos de 1, 2, 4, 8 y 16 px. «Desplazamiento duro» no tiene desenfoque. Después vienen «Interior (inset)», «Resplandor» sobre fondo oscuro y dos variantes de neumorfismo, en relieve y pulsada.

Cada ajuste cambia también el color de la caja, el de la página y el radio del borde.

Del deslizador a la hoja de estilos

1. Pulsa un ajuste o cambia los valores de la primera capa con el deslizador o el campo numérico.
2. «Añadir capa» crea una sombra nueva. Las flechas cambian el orden, el botón de copiar duplica la capa y la papelera la elimina.
3. Ajusta «Color de la caja», «Color de la página» y «Radio del borde» a tu diseño, para ver la sombra sobre el fondo real.
4. «Copiar CSS» toma la declaración entera. «Copiar solo el valor» toma lo que va después de los dos puntos.

Qué escribe exactamente la línea de salida

La primera capa de la lista se pinta encima de las demás, porque CSS lee la lista separada por comas en ese orden. La herramienta no reordena nada. Los ceros pierden la unidad: un desplazamiento de 0 sale como 0 y no como 0px.

Con opacidad del 100 % el color sale como hexadecimal en minúsculas, por ejemplo #111827. Por debajo sale como rgb(0 0 0 / 15%). Las capas ocultas no aparecen. Si todas están ocultas, el resultado es box-shadow: none;.

Límites de cada control

El desplazamiento y la expansión van de -100 a 100 px, el desenfoque de 0 a 200 px, la opacidad de 0 a 100 % y el radio de 0 a 100 px. Todos los valores son enteros, y un número fuera de rango se ajusta al máximo al salir del campo. El máximo son seis capas y la última capa no se puede eliminar.

Colores y vista previa

Los colores deben ser hexadecimales de 3 o 6 cifras. Un nombre como red o un valor hsl() se rechaza con un aviso y el campo vuelve al último color válido. La caja de la vista previa mide 150 px de lado y el área recorta las sombras muy grandes en el borde. El resultado no lleva prefijos como -webkit-.

Preguntas frecuentes (FAQ)