Interactive box-shadow builder with multi-layering, real-time Canvas preview, and CSS output.
Las sombras de cuadro agregan profundidad a los elementos de la interfaz de usuario al simular iluminación y elevación. Las sombras bien diseñadas crean una jerarquía visual y hacen que las interfaces parezcan más táctiles.
Ajuste el desplazamiento horizontal, el desplazamiento vertical, el desenfoque, la extensión, el color y la opacidad. La vista previa de Canvas se actualiza en tiempo real. Copie el código CSS cuando esté satisfecho.
¿Cuál es la diferencia entre desenfoque y extensión? El desenfoque controla qué tan suave es el borde de la sombra. La extensión controla cuánto se expande la sombra.
¿Cuántas capas de sombras debo usar? Por lo general, 1 o 2 capas son suficientes. Utilice sombras insertadas para darle profundidad interior.