Generador de sombras de caja: sombras CSS en línea

Shadow color

Inset

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

Cómo usar Generador de sombras de caja

Establezca los desplazamientos: X suele ser 0, Y positivo (la luz proviene de arriba).
Agregue desenfoque generosamente y opacidad con moderación (las lecturas suaves y tenues son reales.
Ajuste la extensión solo si la sombra debe crecer/reducirse más allá del contorno del elemento.
Copia el CSS y considera aplicar capas de una segunda sombra más ajustada para realismo.

¿Cuál es Generador de sombras de caja?

Un generador de sombras de cuadro convierte los controles deslizantes en box-shadow CSS: desplazamiento horizontal y vertical, radio de desenfoque, extensión y color/opacidad, vista previa en vivo: la sintaxis de cuatro valores (box-shadow: 0 4px 12px rgba(0,0,0,0.15)) cuyos números nadie acierta la primera vez.

Las sombras son la forma en que las IU planas expresan profundidad: una tarjeta "flota" sobre la página exactamente tanto como implica su sombra. La diferencia entre amateur y pulido es casi siempre la suavidad: las sombras reales son muy borrosas, de baja opacidad y ligeramente hacia abajo; Los cuadros oscuros y borrosos gritan por defecto.

Sobre el Generador de sombras de caja

Arrastre los controles deslizantes (desplazamiento X/Y, desenfoque, extensión, color y opacidad), observe cómo se representa la sombra en vivo y copie el CSS cuando le parezca correcto.

Recetas que siempre funcionan: la elevación sutil de la tarjeta es 0 2px 8px rgba(0,0,0,0.1); un levantamiento flotante combina una sombra más grande (0 8px 24px rgba(0,0,0,0.15)) con una pequeña traducirY; La prominencia modal/popover toma 0 16px 48px rgba(0,0,0,0.2). La intuición física: mayor elevación = mayor desplazamiento Y + más desenfoque + MENOS opacidad: la luz se propaga a medida que crece la distancia. Las sombras de colores (un brillo teñido de la marca debajo de un botón) se obtienen al cambiar el rgba negro por el color de la marca en alfa bajo.

La estratificación es el movimiento profesional que admite la sintaxis: dos o tres sombras separadas por comas (una densa y oscura, una grande y tenue) imitan la luz real mucho mejor que cualquier sombra única: las elevaciones de Material Design se construyen exactamente de esta manera.

Preguntas Frecuentes

Desplazamiento X, desplazamiento Y, radio de desenfoque, extensión y luego color. 0 4px 12px 0 rgba(0,0,0,.15): recto hacia abajo 4px, suavizado sobre 12px, sin cambio de tamaño, 15% negro.

Demasiado oscuro y demasiado nítido: los valores predeterminados de los gemelos. Las sombras reales son sorprendentemente débiles (8–20% de opacidad) y borrosas (desenfoque ≥ 2–3 veces el desplazamiento). En caso de duda, duplique el desenfoque y reduzca a la mitad la opacidad.

Escale el desplazamiento Y y desenfoque juntos mientras reduce la opacidad: 0 2px 4px/.2 está bajo; 0 12px 32px/.12 flota alto. La distancia difunde la luz; el CSS debería imitar eso.

Múltiples sombras separadas por comas en un elemento: una oscura y densa (sombra de contacto) más una grande y tenue (ambiente). 0 1px 3px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.1) supera cualquier sombra en realismo.

Las sombras estáticas son baratas. La animación de la sombra del cuadro obliga directamente a volver a pintar: anime la opacidad en un pseudoelemento que lleva la sombra o transforme el elemento mientras la sombra permanece, durante 60 fps.