Generador de box-shadow CSS
Crea box-shadow de CSS de forma visual: apila varias capas, ajusta desplazamientos, desenfoque, expansión, inset y opacidad RGBA, con vista previa en vivo y código limpio.
Ajustes predefinidos
Capas
Ajustes de la vista previa
Vista previa
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
Herramientas Relacionadas
Ver Todas¿Qué es Generador de box-shadow CSS?
Un editor visual para la propiedad CSS box-shadow. Puedes apilar varias capas de sombra, dar a cada una su propio desplazamiento, desenfoque, expansión, color, opacidad e indicador inset, y ver el resultado sobre una caja de ejemplo mientras la herramienta escribe el CSS correspondiente.
Cómo usar Generador de box-shadow CSS
- Elige un ajuste predefinido (Suave, En capas, Dura, Resplandor, Interior, Anillo) o parte de la sombra predeterminada.
- Selecciona una capa y ajusta Desplazamiento horizontal, Desplazamiento vertical, Desenfoque, Expansión, Color de la sombra y Opacidad; marca Interior (inset) para una sombra interior.
- Usa Añadir capa / Quitar capa para crear sombras de varias capas; las capas se listan en orden de pintado.
- Cambia el fondo, el color del elemento y el radio en Ajustes de la vista previa para valorar la sombra en contexto.
- Copia el código CSS generado.
Ejemplo
One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on
box-shadow: inset 10px -5px 20px 3px #3b82f6;
Cuándo usar Generador de box-shadow CSS
Úsalo para diseñar la elevación de tarjetas, anillos de foco, resplandores o sombras interiores en cualquier elemento HTML. Para sombras en texto usa el Generador de text-shadow, y para sombras que sigan la forma de un PNG transparente o de un elemento recortado usa filter: drop-shadow() (Generador de filtros CSS), porque box-shadow siempre sigue la caja de borde del elemento.
Cómo funciona Generador de box-shadow CSS
Cada capa se convierte en un valor de box-shadow con el orden [inset] x y blur spread color. Las longitudes se escriben en px (el cero como 0 sin unidad). El deslizador de opacidad se multiplica por el alfa propio del color: los colores totalmente opacos se escriben en hex y los translúcidos como rgba(r, g, b, a). Varias capas se unen con comas, una por línea; la primera capa se pinta encima. El desenfoque no puede ser negativo; la expansión sí.
Casos de Uso Comunes
- Elevación en capas al estilo Material para tarjetas y modales
- Anillos de foco accesibles con una sombra solo de expansión (0 0 0 3px)
- Sombras interiores para botones pulsados y campos de formulario
- Resplandores de color alrededor de botones de llamada a la acción
- Sombras duras desplazadas para diseños neobrutalistas
Preguntas Frecuentes
¿En qué orden se dibujan varias sombras?
La primera sombra de la lista se pinta encima y la última debajo. La herramienta escribe las capas en el orden que aparece en el panel Capas.
¿Qué diferencia hay entre desenfoque y expansión?
El desenfoque suaviza el borde de la sombra (no puede ser negativo). La expansión agranda o reduce la sombra antes de desenfocarla; una expansión negativa hace la sombra más pequeña que el elemento.
¿Sigo necesitando -webkit-box-shadow?
No. Todos los navegadores admiten box-shadow sin prefijo desde hace más de una década, así que la herramienta solo genera la propiedad estándar.
¿Por qué no aparece la sombra alrededor de mi imagen transparente?
box-shadow sigue la caja rectangular del elemento (incluido border-radius), no los píxeles visibles. Para eso usa filter: drop-shadow().