Generador de box-shadow CSS
Diseña una box-shadow CSS con controles de desplazamiento, desenfoque, extensión, color y opacidad, míralo en vivo sobre un elemento y copia el CSS listo.
Cómo usarlo
Mueve los controles de desplazamiento horizontal y vertical, desenfoque y extensión, elige color y opacidad y activa «inset» para una sombra interior. La vista previa es en vivo.
Cuando te guste, copia la línea box-shadow directamente en tu hoja de estilos. Es CSS estándar compatible con todos los navegadores modernos.
Preguntas frecuentes
¿Qué hacen desplazamiento, desenfoque y extensión?
El desplazamiento mueve la sombra en horizontal y vertical, el desenfoque suaviza sus bordes y la extensión aumenta o reduce su tamaño antes de desenfocar.
¿Qué es inset?
Dibuja la sombra dentro del elemento en lugar de fuera, creando un aspecto interior o hundido.
¿Puedo usar varias sombras?
Esta herramienta crea una; puedes combinar varias separándolas con comas en tu CSS.
¿Funciona en todos lados?
Sí — box-shadow es compatible con todos los navegadores modernos sin prefijos.