Generador de box-shadow
Funciona por completo en tu navegador. Tus archivos y datos nunca salen de tu dispositivo.
Acerca de esta herramienta
Ajusta desplazamiento, desenfoque, expansión, color y opacidad con controles deslizantes y observa cómo se actualiza una caja de vista previa en tiempo real. El CSS generado se actualiza mientras arrastras, listo para pegar directamente en una hoja de estilos.
¿Se sube mi información a algún servidor?
No, todo se ejecuta en tu navegador, así que no hay nada que subir ni seguimiento de lo que creas.
¿Qué controlan exactamente el desplazamiento, el desenfoque y la expansión?
El desplazamiento horizontal y vertical alejan la sombra de la caja: los valores positivos la empujan a la derecha y hacia abajo, los negativos a la izquierda y hacia arriba. El desenfoque controla qué tan suave es el borde de la sombra, desde una silueta nítida en cero hasta un resplandor difuso en valores altos. La expansión agranda o reduce la forma de la sombra antes de aplicar el desenfoque: una expansión positiva hace que la sombra sea más grande que la caja por todos los lados, y una negativa la encoge hacia adentro. El color y la opacidad trabajan juntos: eliges cualquier color hexadecimal, y el control de opacidad decide qué tan sólido o tenue se ve, algo que la herramienta convierte por dentro en un valor rgba() estándar. Activar el modo interior (inset) hace que la sombra pase de estar afuera del borde de la caja a estar adentro, y así consigues un efecto hundido o tallado en vez de uno elevado.
¿Cómo funcionan las capas de sombra múltiples?
Añade varias capas para apilar sombras como permite CSS, separadas por comas en el valor final de box-shadow. Un patrón habitual es combinar una sombra oscura, ajustada y de poca opacidad pegada a la caja con otra más suave, ancha y clara más alejada, lo que da una sensación de profundidad más natural que una sola sombra. Las capas se dibujan en el orden en que las agregas, con la primera capa encima de las demás, tal como el navegador pinta los valores de box-shadow separados por comas. Puedes mezclar capas interiores y exteriores en la misma pila, algo útil para una tarjeta que necesita a la vez una sombra exterior sutil y un ligero brillo interior.
Usos habituales: tarjetas y botones que necesitan profundidad, efectos neumórficos o interiores, o simplemente ajustar la sombra exacta sin adivinar valores de píxeles a mano. Consulta la referencia de box-shadow de MDN para la sintaxis completa y la compatibilidad con navegadores, y la guía de MDN sobre colores CSS para entender cómo funcionan los valores rgba() del CSS generado.