Generador de sombras de cuadros CSS

Una declaración de sombra de cuadro tiene seis partes móviles (desplazamiento X e Y, desenfoque, extensión, color y la palabra clave insertada opcional) y la única forma de hacerlo bien es verlas. Este generador coloca cada parte en un control deslizante y muestra el resultado en una tarjeta de vista previa a medida que arrastra, por lo que la línea CSS en la parte inferior siempre es exactamente lo que está mirando.

Las sombras del mundo real rara vez son una sola capa. La lista de capas le permite apilar hasta cuatro sombras en una sola declaración: una línea oscura estrecha para la definición de los bordes más un lavado suave y amplio para la elevación, o el par claro y oscuro que define el neumorfismo. Seleccione una capa para editarla, elimine las que no necesita y el valor combinado del cuadro y la sombra se actualizará en vivo.

Las sombras se leen de manera muy diferente en interfaces oscuras, donde una sombra negra en una página casi negra simplemente desaparece. La opción de vista previa del fondo cambia el fondo entre claro y oscuro para que puedas comprobar ambos temas antes de enviarlos. Las páginas preestablecidas cubren las variantes que la gente realmente busca: una sombra de elevación suave, un pozo insertado, la receta de neumorfismo de dos capas y una sombra de tarjeta sutil.

Como todas las herramientas de este sitio, el generador es gratuito y se ejecuta completamente en su navegador: sin carga, sin cuenta, y sigue funcionando sin conexión una vez que se carga la página.