Generador de box-shadow CSS – Sombras por capas con vista previa
Diseña sombras suaves, duras, por capas o interiores con controles deslizantes y vista previa en vivo, y copia un código box-shadow limpio. Apila hasta seis capas para lograr una profundidad realista.
Mueve los controles de desplazamiento horizontal y vertical, desenfoque, expansión, color y opacidad: la vista previa y el CSS se actualizan al instante. Pulsa + para añadir otra capa, marca «inset» para una sombra interior o elige un ajuste como Fluida (capas) o Neumorfismo. Copia la línea box-shadow en tu hoja de estilos.
Cómo usar la herramienta: Generador de box-shadow CSS
- Elige un ajuste o empieza con la sombra suave.
- Ajusta desplazamiento, desenfoque, expansión y opacidad.
- Añade capas con + para una profundidad más suave.
- Cambia el fondo, el color de la caja y el radio.
- Copia el CSS y pégalo en tu hoja de estilos.
La sintaxis de box-shadow
Una sombra se escribe como `box-shadow: x y desenfoque expansión color`, con la palabra `inset` opcional al principio. Varias sombras se separan con comas y se pintan de la primera (encima) a la última.
| Valor | Qué hace |
|---|---|
| Desplazamiento x / y | Mueve la sombra a la derecha/abajo (negativo: izquierda/arriba) |
| Desenfoque | Suaviza el borde; 0 da una sombra dura |
| Expansión | Agranda o reduce la sombra antes de desenfocarla |
| Color | Normalmente negro o un tono oscuro con poca opacidad |
| inset | Dibuja la sombra dentro del elemento |
Por qué las sombras por capas se ven mejor
Los objetos reales proyectan sombras nítidas cerca y difusas lejos. Una sola sombra grande y borrosa suele verse plana o sucia. Apilar varias sombras que duplican el desplazamiento y el desenfoque —1, 2, 4, 8 y 16 px con poca opacidad— crea la profundidad suave y natural de los sistemas de diseño modernos. El ajuste «Fluida (capas)» hace exactamente eso.
Consejos para sombras bonitas
- Mantén la opacidad baja: un 5–20 % de negro basta sobre fondos claros.
- Usa una expansión negativa con más desenfoque para elementos que deben «flotar».
- Tiñe la sombra con el tono del fondo en lugar de negro puro para un efecto más suave.
- En fondos oscuros las sombras apenas se ven; usa superficies más claras o bordes.
- Para efectos al pasar el ratón, anima `transform` en vez de la sombra.
Neumorfismo y sombras interiores
El neumorfismo combina una sombra clara arriba a la izquierda y una oscura abajo a la derecha en un elemento del mismo color que el fondo, como si saliera de la superficie. Llama la atención, pero tiene poco contraste, así que no lo uses para botones importantes. Las sombras interiores van bien en campos de formulario y estados pulsados.
Herramientas CSS relacionadas
Redondea esquinas con el Generador de border-radius, crea fondos con el Generador de degradados CSS, diseña paneles de cristal con el Generador de glassmorphism y reduce la hoja de estilos final con el Minificador y embellecedor de CSS. Todo funciona en tu navegador.
También te pueden servir estas herramientas gratis: Formateador JSON, Generador de contraseñas y Probador de regex.
Preguntas frecuentes
¿Cómo pongo sombra a un div en CSS?
Usa box-shadow, por ejemplo box-shadow: 0 10px 30px -5px rgba(0,0,0,.2). Copia cualquier sombra de este generador.
¿Puedo usar varias sombras?
Sí. Sepáralas con comas. El generador permite apilar hasta seis capas.
¿Qué hace la expansión (spread)?
Agranda (positiva) o reduce (negativa) la sombra antes de aplicar el desenfoque.
¿Cómo hago una sombra interior?
Añade la palabra inset o marca «Sombra interior» en el generador.
¿box-shadow afecta al diseño de la página?
No. Las sombras no ocupan espacio ni mueven otros elementos.
Última actualización: