Sombra de cuadro CSS suave: código listo para usar
Cree visualmente código CSS de sombra de cuadro: controles deslizantes para desplazamiento, desenfoque, extensión, color con opacidad, modo de inserción y hasta cuatro capas con vista previa en vivo.
Resultado
Esta página abre el generador de sombras de cuadro precargado con una sombra suave: sin desplazamiento horizontal, 8 píxeles hacia abajo, un generoso desenfoque de 24 píxeles y una opacidad de negro baja del 12 %. La tarjeta de vista previa la muestra inmediatamente: mueva cualquier control deslizante y la línea CSS seguirá en tiempo real.
Las sombras suaves son el caballo de batalla de las interfaces modernas. Un gran desenfoque combinado con una opacidad baja levanta una tarjeta de la página sin dibujar un contorno definido, razón por la cual la mayoría de los sistemas de diseño mantienen sus sombras de elevación exactamente en este rango en lugar de las sombras densas y oscuras del primer diseño plano.
Copie la línea de sombra del cuadro directamente en su hoja de estilo o apile hasta tres capas más para obtener una elevación más rica. El generador se ejecuta completamente en su navegador: no se carga nada en ninguna parte.