Generador de sombras CSS — diseña sombras con vista previa
Crea efectos box-shadow de CSS de forma visual con controles de desplazamiento, difuminado, expansión, color e interior, y copia el código.
🔒 Funciona por completo en tu navegador. Tu entrada y salida no se envían a ningún servidor ni se guardan: totalmente privado.
Acerca de esta herramienta
Crea efectos box-shadow de CSS de forma visual ajustando el desplazamiento horizontal y vertical, el difuminado, la expansión, el color y la opción inset, con una vista previa en vivo del resultado. Cuando te guste, copia el código box-shadow generado directamente en tu hoja de estilos. Todo ocurre en tu navegador.
Preguntas frecuentes
¿Qué significan los valores de box-shadow?
Son, en orden, el desplazamiento horizontal, el desplazamiento vertical, el radio de difuminado, el radio de expansión y el color. Añadir inset dibuja la sombra dentro del elemento en lugar de detrás, lo que sirve para efectos hundidos o de botón pulsado.
¿Cómo hago una sombra suave y sutil?
Usa un desplazamiento pequeño, un radio de difuminado mayor y un color con poca opacidad. Una sombra suave, por ejemplo unos píxeles hacia abajo con bastante difuminado, transmite profundidad natural, mientras que una sombra nítida y oscura puede resultar pesada.
¿Se envía algo a un servidor?
No. La vista previa y el CSS generado se crean por completo en tu navegador, así que nada de lo que diseñas se sube ni se almacena.