Generador box-shadow
Crea sombras CSS de varias capas con vista previa en vivo.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Sombras con relieve real, sin tanteos
Ajustar una sombra a mano significa recargar la página diez veces. Aquí mueves los controles y la vista previa reacciona en vivo. Apila varias capas para una profundidad realista y copia el CSS exacto.
-
Ajusta la capa
Desplazamiento X/Y, desenfoque, extensión, color y opacidad.
-
Añade capas
Mezcla una sombra nítida y una difusa para un aspecto natural.
-
Copia el CSS
La propiedad box-shadow completa, lista para pegar.
Entender la sintaxis
| Valor | Función |
|---|---|
| offset-x | Desplazamiento horizontal (derecha si positivo) |
| offset-y | Desplazamiento vertical (abajo si positivo) |
| blur | Radio de desenfoque (mayor = más suave) |
| spread | Agranda (+) o reduce (−) la sombra |
| color | Color, a menudo rgba() para la opacidad |
| inset | Coloca la sombra dentro de la caja |
Todo se genera en tu navegador. Ejemplo por defecto: box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
Preguntas frecuentes
¿Qué significan los valores de box-shadow?
En orden: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de extensión y luego el color. Ejemplo: «0 10px 25px -5px rgba(124, 58, 237, 0.35)» desplaza la sombra 10px hacia abajo, la difumina 25px y la reduce 5px.
¿Para qué sirve el radio de extensión (spread)?
Agranda (valor positivo) o reduce (valor negativo) la sombra antes del desenfoque. Un spread negativo es ideal para sombras suaves y recogidas, como una tarjeta que flota ligeramente sobre la página.
¿Cómo apilo varias sombras?
Separa cada capa con una coma. La primera listada se dibuja encima. Combinar una sombra nítida y ceñida con otra amplia y difusa resulta mucho más natural que una sola sombra.
¿Qué diferencia hay entre box-shadow y drop-shadow?
box-shadow sigue el rectángulo de la caja (y su border-radius). filter: drop-shadow() sigue la forma real, transparencia incluida — ideal para PNG recortados y SVG. Para una tarjeta o un botón, box-shadow es la elección correcta.