Generador de Sombras CSS
Diseña sombras multicapa realistas y elegantes para tarjetas, botones y componentes web con previsualización en tiempo real y código CSS limpio.
Presets Populares
Código CSS Generado
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.12);Capas de Sombra
Parámetros de la Capa Activa
Cómo Crear Sombras CSS Profesionales
Aprende a combinar desenfoque, propagación y capas múltiples para lograr profundidad visual natural.
Ajusta los desplazamientos y el desenfoque
Define la dirección de la luz con los ejes X e Y. Usa valores de desenfoque mayores para simular una fuente de luz lejana y suave.
Apila múltiples capas de sombras
Las sombras realistas del mundo físico nunca son una sola capa uniforme; combina una sombra difusa y suave con una más densa cerca del borde.
Copia el código CSS listo para producción
Haz clic en "Copiar CSS" para insertar la propiedad box-shadow completa y su prefijo para navegadores compatibles.
Anatomía de la propiedad CSS box-shadow
La sintaxis estándar es: box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>. Cuando se omiten spread o inset, el navegador asume cero y sombra externa respectivamente.