Generador de sombras de caja CSS
Cree sombras suaves y realistas visualmente en lugar de adivinar valores de píxeles.
- Tus datos nunca salen de tu dispositivo
- 100 % gratis
- Sin registro
- Funciona sin conexión después de la primera carga
Cómo hacer una sombra de caja CSS
- Ajusta el offset, el desenfoque, la dispersión, el color y la opacidad de cada capa.
- Agregar, duplicar, ocultar o reordenar capas — o elija un ajuste preestablecido.
- Copie el código CSS, Tailwind o drop-shadow.
Acerca de Generador de box-shadow
Crear sombras de cuadro CSS visualmente.
Todo funciona en su navegador, por lo que es instantáneo y privado. Sus colores y configuraciones recientes se recuerdan en este dispositivo, y la barra de direcciones mantiene su color para que pueda compartirlo o marcarlo.
Ideal para
- Tarjetas, modales y botones
- Material y diseños neo-brutalistas
- Anillos de enfoque y efectos de brillo
Consejo: Usa un gris azulado oscuro en lugar de negro puro para obtener sombras más suaves y naturales.
Preguntas frecuentes
¿Cómo hacer una sombra realista?
Apila varias capas blandas que crezcan en offset y desenfoque.Utilice “Sombra suave en capas” para construirlas automáticamente, o comience desde los preajustes flotantes o suaves en capas.
¿Cuál es la diferencia entre box-shadow y drop-shadow?
box-shadow sigue la caja del elemento; filter: drop-shadow sigue la forma real, por lo que se adapta a PNG transparentes, iconos SVG y texto. Ambos se generan.
¿Qué hace la propagación?
La propagación crece (positivo) o se encoge (negativo) la sombra antes de difuminar — Una propagación negativa mantiene una sombra debajo del elemento en lugar de alrededor de él.
¿Puedo usar varias sombras a la vez?
Sí. añadir capas — se escriben como una sombra de caja separada por comas, con la primera capa dibujada en la parte superior.
¿El box-shadow ralentiza una página?
Los desenfoques muy grandes en muchos elementos, o la animación de la sombra en sí, pueden ser costosos. — Animar opacidad o transformar en su lugar.