Generador de Box Shadow CSS
Diseña sombras CSS (box-shadow) de forma visual con vista previa en vivo y controles deslizantes de desplazamiento, desenfoque, expansión, color, opacidad e inset.
Diseña la sombra CSS perfecta de forma visual con este generador gratuito. Arrastra los controles de desplazamiento horizontal y vertical, desenfoque, expansión y opacidad, elige el color de la sombra y activa el inset para sombras interiores. La vista previa en vivo se actualiza mientras ajustas, y copias una regla box-shadow limpia y lista para pegar — todo en tu navegador y sin instalar nada.
¿Qué es un generador de box-shadow CSS?
Un generador de box-shadow CSS es una herramienta visual que construye la propiedad box-shadow por ti. En lugar de adivinar valores en píxeles, ajustas el desplazamiento, el desenfoque, la expansión, el color y la opacidad con controles deslizantes y observas una vista previa en vivo, y luego copias el CSS exacto de la box-shadow para pegarlo en tu hoja de estilos.
Cómo generar una box-shadow
Usa los controles deslizantes para posicionar y suavizar la sombra, elige su color y activa el inset para una sombra interior. Cuando la vista previa se vea bien, copia la regla CSS generada.
- Define el desplazamiento horizontal y vertical para mover la sombra.
- Aumenta el radio de desenfoque para una sombra más suave o la expansión para agrandarla.
- Elige el color de la sombra y ajusta la opacidad para darle sutileza.
- Activa el Inset si quieres una sombra interior en lugar de una sombra exterior.
- Haz clic en Copiar CSS para obtener la regla box-shadow lista para pegar.
¿Por qué usar este generador de box-shadow?
- La vista previa en vivo se actualiza al instante cuando ajustas cada valor.
- Control total sobre el desplazamiento, el desenfoque, la expansión, el color y la opacidad.
- Opción de inset para sombras interiores además de las sombras exteriores.
- Genera el color en rgba() para que la opacidad quede integrada en la sombra.
- Un clic copia una regla box-shadow limpia y lista para pegar.
- 100% gratis y privado — todo se ejecuta en tu navegador.
Preguntas frecuentes
¿Qué significan los valores de la box-shadow?
La propiedad box-shadow recibe desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y un color: box-shadow: x y desenfoque expansión color. Los desplazamientos positivos empujan la sombra hacia la derecha y hacia abajo, el desenfoque suaviza el borde y la expansión agranda o reduce la sombra.
¿Qué es una sombra inset?
Añadir la palabra clave inset dibuja la sombra dentro del elemento en lugar de fuera, creando un aspecto interior o hundido. Activa la opción Inset para añadirla al CSS generado.
¿Por qué el color se genera en rgba()?
El control de opacidad se aplica a través del canal alfa de un color rgba(), de modo que el color de la sombra y su transparencia viajan juntos en un solo valor. Esta es la forma más fiable de controlar la opacidad de la sombra en CSS.
¿Puedo añadir más de una box-shadow?
Sí. En CSS puedes aplicar varias sombras separándolas con comas, por ejemplo box-shadow: 0 1px 2px #0003, 0 4px 8px #0002. Esta herramienta genera una sola sombra que puedes copiar y combinar según lo necesites.