Generador de Box Shadow
El generador de box-shadow crea una sombra CSS con controles para el desplazamiento X e Y, el desenfoque, la extensión, el color, la opacidad y la opción inset, además de presets de Material Design y Tailwind, y devuelve el CSS exacto.
Acerca de esta herramienta
El generador de box-shadow crea una sombra CSS con controles para el desplazamiento X e Y, el desenfoque, la extensión, el color, la opacidad y la opción inset, además de presets de Material Design y Tailwind, y devuelve el CSS exacto.
Cómo se usa
- Empieza con un preset o deja Personalizado.
- Ajusta el desplazamiento X/Y, el desenfoque, la extensión y la opacidad.
- Elige el color de la sombra y marca Inset para una sombra interior.
- Haz clic en Copiar CSS para pegar la regla box-shadow.
Datos útiles
- La sintaxis de box-shadow es: [inset] offset-x offset-y blur-radius spread-radius color.
- Un radio de desenfoque mayor suaviza el borde; la extensión hace crecer o encoger la sombra antes de desenfocarla.
- Las sombras oscuras de baja opacidad (aproximadamente 10–25%) se ven más naturales que el negro sólido.
- Se pueden superponer varias sombras separándolas con comas.
- La palabra clave inset dibuja la sombra dentro del borde del elemento.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo añado una sombra a un div en CSS?
Usa la propiedad box-shadow, por ejemplo box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); esta herramienta escribe el valor por ti.
¿Qué diferencia hay entre blur y spread?
Blur controla lo suave que es el borde de la sombra. Spread amplía o reduce el tamaño de la sombra antes de aplicar el desenfoque.
¿Cómo hago una sombra interior?
Añade la palabra clave inset al principio del valor, o marca Inset en la herramienta.
¿Puedo usar varias sombras box-shadow?
Sí. Separa las sombras con comas; las sombras superpuestas, como los presets de Material y Tailwind, se ven más realistas.