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.