Generador de CSS Box Shadow

Una declaración box-shadow tiene seis partes móviles — desplazamiento X e Y, desenfoque, expansión, color y la palabra clave opcional inset — y la única forma de acertar con ellas es verlas. Este generador sitúa cada parte en un deslizador y muestra el resultado en una tarjeta de vista previa mientras arrastras, de modo que la línea CSS en la parte inferior es siempre exactamente lo que estás viendo.

Las sombras en el mundo real rara vez son de una sola capa. La lista de capas te permite apilar hasta cuatro sombras en una sola declaración: una línea oscura y ajustada para la definición del borde más un lavado amplio y suave para la elevación, o el par claro-oscuro que define el neumorfismo. Selecciona una capa para editarla, elimina las que no necesites, y el valor combinado de box-shadow se actualiza en vivo.

Las sombras se leen de forma muy distinta en interfaces oscuras, donde una sombra negra sobre una página casi negra simplemente desaparece. El selector de fondo de vista previa cambia el fondo entre claro y oscuro para que puedas comprobar ambos temas antes de publicar. Las páginas predefinidas cubren las variantes que la gente realmente busca: una sombra de elevación suave, un pozo interior, la receta neumórfica 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 tu navegador: sin subidas, sin cuentas, y sigue funcionando sin conexión una vez que se ha cargado la página.