Generador de box-shadow CSS
Construye un valor box-shadow ajustando el desplazamiento, desenfoque, expansión y color, con múltiples capas y preestablecidos.
Generador de box-shadow CSS
Ajusta el desplazamiento horizontal y vertical, el radio de desenfoque, el radio de expansión y el color, y esta herramienta monta la declaración box-shadow coincidente mientras avanzas. Está construida para el caso cotidiano — una tarjeta, un botón, un modal que necesita elevarse de la página — así como para sombras en capas hechas de varias sombras apiladas juntas, la técnica detrás de la profundidad suave y realista usada en la mayoría de los sistemas de diseño modernos.
El menú desplegable preestablecido ofrece elevación sutil, media e intensa, cada una con su propio número de capas, desplazamiento y desenfoque ya ajustados; elige personalizado para controlar cada valor tú mismo. La opción de capas controla cuántas sombras se apilan: cada capa agregada aumenta el desplazamiento y desenfoque por su índice y reduce su opacidad, convirtiendo una única sombra plana en una suave y convincente. Interno invierte la sombra hacia adentro para elementos presionados, la opacidad controla qué tan fuerte se ve el color, y el interruptor de unidad produce px o rem. Activa la variante en modo oscuro para una segunda declaración más fuerte envuelta en un bloque @media (prefers-color-scheme: dark) — una sombra necesita más opacidad para seguir siendo visible en un fondo oscuro. Elige si el resultado sale como una sola línea, una propiedad personalizada --box-shadow, o una clase .box-shadow, y agrega una línea filter: drop-shadow coincidente para elementos a los que box-shadow no puede llegar, como un ícono SVG o un PNG transparente.
Cada valor está limitado a un rango sensato, y un color no reconocido vuelve al negro en lugar de CSS roto, por lo que el resultado siempre se pega limpiamente en una hoja de estilos.
Todo se ejecuta en tu navegador mientras ajustas los controles — ningún color ni CSS generado se envía a ningún lado. Copia el resultado, descárgalo como archivo .txt o envíalo a otra herramienta para seguir trabajando en él.