Generador de Box Shadow

Diseña sombras con respuesta en tiempo real

Un box-shadow bien ajustado puede hacer que una interfaz se sienta con capas, clicable y cuidada. Una sombra mal ajustada puede hacer que la misma interfaz parezca sucia o incoherente. Este generador te da control directo sobre los valores que importan: desplazamiento horizontal, desplazamiento vertical, desenfoque, extensión, color, opacidad y modo inset. Al mover cada control deslizante, la vista previa y el CSS se actualizan al instante, lo que facilita encontrar un resultado natural en lugar de teclear números a mano.

El resultado es una declaración CSS estándar, por lo que funciona con tarjetas, modales, botones, menús desplegables, barras de navegación y cualquier otro elemento que acepte box-shadow. No se crean imágenes y no se sube nada. El navegador simplemente aplica la sombra al elemento de vista previa y copia el CSS final cuando estés listo.

Entender desplazamiento, desenfoque y extensión

Los desplazamientos horizontal y vertical alejan la sombra del elemento. Un desplazamiento vertical positivo suele sugerir que el objeto está elevado sobre la página, mientras que una sombra con poco desplazamiento puede parecer un resplandor. El desenfoque controla la suavidad: un desenfoque bajo crea un borde duro y gráfico, mientras que uno mayor produce una sombra difusa más realista. La extensión cambia el tamaño de la sombra antes de aplicar el desenfoque. Una extensión positiva hace la sombra más amplia y pesada; una negativa la estrecha, de modo que el desenfoque resulta más sutil.

Usar sombras en un sistema de diseño

Las sombras son más eficaces cuando son coherentes. En lugar de inventar una sombra nueva para cada componente, crea una pequeña escala de elevación: una sombra sutil para las tarjetas, una más fuerte para los popovers y una concentrada para los modales. Prueba las sombras tanto en superficies claras como oscuras, porque la misma opacidad puede resultar demasiado fuerte sobre un fondo pálido y demasiado débil sobre uno oscuro. Las sombras inset son útiles para estados pulsados, campos hundidos y paneles rehundidos, pero conviene usarlas con moderación para que los controles sigan siendo claros y accesibles.