Generador de Sombras CSS (Box-Shadow)

En CSS, una sombra box-shadow se construye con seis valores: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión, color y una palabra clave opcional inset. Calcular estos valores escribiéndolos a mano es lento, sobre todo cuando intentas igualar una sombra de un diseño o reproducir un efecto que viste en otro sitio. Este generador convierte ese ensayo y error en un proceso visual.

Mueve los controles deslizantes y la caja de vista previa se actualiza al instante, así puedes ver exactamente cómo se comporta la sombra antes de que llegue a tu hoja de estilos. Los controles de desplazamiento horizontal y vertical mueven la sombra hacia la izquierda, la derecha, arriba o abajo. El desenfoque controla lo suave que se ve el borde, la expansión agranda o reduce la sombra de forma independiente a la forma que la genera, y el selector de color define tanto el tono como la opacidad. Activa el interruptor inset para convertir una sombra exterior en una sombra interior que parece una superficie presionada o hundida.

Como las interfaces reales rara vez usan una sola sombra, puedes apilar varias capas. Combinar una sombra ajustada y oscura con otra más suave y amplia es como la mayoría de las tarjetas y botones modernos logran profundidad. Los preajustes en la parte superior te dan un punto de partida rápido para sombras suaves, duras, alargadas y de estilo neumórfico, que luego puedes ajustar. Cuando el efecto se vea bien en la vista previa, copia el CSS generado y pégalo directamente en tu proyecto.