Generador Box Shadow CSS Gratis: Sombra de Caja Visual Online

A Ajusta los controles: X/Y offset (dirección), blur (difusión), spread (extensión), color y opacidad. La sombra se actualiza en vivo.

A La sombra se proyecta hacia dentro de la caja en vez de hacia fuera. Crea un efecto de profundidad.

A Sí, el código CSS se muestra y se copia con un clic.

A Sí, pero solo si animas opacidad o color. Mover valores como el desplazamiento o desenfoque obliga al navegador a recalcular el diseño en cada fotograma. Eso mata el rendimiento, sobre todo en móviles. Mejor limítate a transiciones de opacidad o usa un pseudo-elemento para que sea más fluido. Pruébalo con la vista previa del generador antes de subirlo.

A Sí, sepáralas con comas en el generador. Haz clic en «Agregar sombra» para crear otra capa. Por ejemplo, dos sombras con diferentes desplazamientos simulan una tarjeta elevada — una suave y profunda, la otra más nítida. La vista previa en vivo muestra todas las capas al instante.

A Sí, no son intercambiables. box-shadow genera un rectángulo alrededor del cuadro del elemento — esquinas incluidas. filter: drop-shadow sigue la forma real del contenido. Un PNG transparente con bordes irregulares obtendrá una sombra perfectamente contorneada. Usa box-shadow para tarjetas, botones y componentes de interfaz. Recurre a drop-shadow para logotipos o imágenes recortadas. Pruébalo aquí: aplica box-shadow a un elemento circular, luego cambia a drop-shadow en tu CSS. Verás la diferencia al instante.

A Sucede cuando usas un radio de desenfoque muy pequeño — menos de 2px se ve áspero en pantallas Retina. El navegador dibuja la sombra sobre píxeles físicos, y sin suficiente difuminado aparecen esos escalones. Pon el desenfoque en 3-4px como mínimo para un acabado suave. La vista previa en vivo del generador te lo muestra al instante: acerca la imagen y compruébalo antes de copiar el código.

A Los navegadores actuales como Chrome, Firefox y Safari renderizan las propiedades box-shadow de forma coherente siguiendo los estándares del W3C. Eso sí, las versiones antiguas de Internet Explorer no reconocen este código y el efecto no aparecerá. Te recomiendo revisar tu diseño en Chrome versión 110 o superior para asegurar que el radio de desenfoque sea el correcto. Si necesitas compatibilidad total, usa una regla de respaldo con un borde sencillo en tu CSS.

A Obtienes un resplandor uniforme alrededor de los cuatro lados — sin dirección, solo un halo. Es el truco detrás de los efectos neón suaves y los anillos de enfoque. Combínalo con un desenfoque grande (25px o más) y un color de baja opacidad como rgba(0,0,0,0.15) para una sombra ambiental sutil. Si también aumentas el valor de expansión, la sombra crece uniformemente hacia afuera, simulando un borde más grueso. Prueba a activar inset con los mismos parámetros — es un efecto totalmente distinto, un viñeteado interior.