132 · Diseño y Web

Generador de sombras de caja

Arrastra los controles deslizantes para dar forma a una sombra, mira la vista previa y copia el CSS.

Tus datos: Esta herramienta procesa su entrada en este navegador. CapyHelp no carga esa entrada para generar su resultado. Detalles de privacidad

Generador de sombras de caja

#1e1b4b

Cómo utilizar el generador de sombras de cajas

  1. Ajuste el desplazamiento, el desenfoque y la extensión.
  2. Elige un color y opacidad.
  3. Copie la línea de sombra del cuadro.

Sombras de aspecto natural

Las sombras reales son suaves y ligeramente teñidas. Un desenfoque grande con una extensión negativa, baja opacidad y un toque de color de su diseño parece más natural que el negro sólido. Una segunda sombra densa agrega un borde nítido, que es lo que hace la opción "segunda capa suave".

Ejemplos

Y 12px, desenfoque 32px, extensión −8px, 25%

Una sombra de tarjeta suave

recuadro

Una mirada presionada

Preguntas

¿La sombra del cuadro afecta el diseño?

No. Las sombras se dibujan fuera del elemento sin mover nada a su alrededor.

Traducción automática. Revisar resultados importantes.