Crea sombras de cuadro CSS de forma visual con vista previa en tiempo real. Controla el desplazamiento, el desenfoque, la extensión, el color y las capas múltiples. Copia al instante el código CSS listo para usar.
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25);La propiedad «box-shadow» de CSS añade efectos de sombra alrededor del contorno de un elemento. Una sombra se define por su desplazamiento horizontal, su desplazamiento vertical, su radio de desenfoque, su radio de extensión, su color y un indicador de inserción opcional. Se pueden apilar varias sombras, separadas por comas, para crear efectos en capas, y todos los navegadores modernos admiten esta propiedad sin prefijos de fabricante.
Ajusta los controles deslizantes y el selector de color para configurar cada capa de sombra. El cuadro de vista previa se actualiza en tiempo real a medida que cambian los valores. Se pueden añadir y eliminar varias capas de sombra de forma independiente. Cuando estés satisfecho, haz clic en «Copiar» para obtener el valor CSS completo de la sombra de cuadro, listo para pegarlo en una hoja de estilos.
Utiliza los ajustes predefinidos como punto de partida para patrones habituales: sombras de tarjeta para componentes de la interfaz de usuario, sombras elevadas para ventanas modales, sombras suaves para aportar profundidad sutil y sombras duras para lograr una estética de diseño plano. La opción «inset» crea sombras internas útiles para los estados de botón pulsado y los campos de entrada con reborde interior.