Generador de CSS Box Shadow
Construye sombras CSS box-shadow multicapa visualmente con previsualización en directo. Ajusta desplazamientos, desenfoque, expansión, color y opacidad — luego copia el valor CSS listo para usar.
Generador de CSS Box Shadow
Previsualización en Directo
Salida CSS
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);¿Qué es CSS box-shadow?
La propiedad CSS box-shadow añade uno o más efectos de sombra al marco de un elemento. Cada sombra se define por su desplazamiento horizontal y vertical, radio de desenfoque, radio de expansión, color y una palabra clave inset opcional que mueve la sombra dentro del elemento.
Sombras multicapa
Puedes apilar múltiples capas de sombra para lograr efectos de profundidad, efectos de brillo o bordes simulados. Las capas se renderizan de atrás hacia adelante, por lo que la primera sombra en la lista aparece en la parte superior.
Cómo usar
- Haz clic en 'Añadir Sombra' para crear una capa de sombra.
- Ajusta los controles deslizantes de desplazamiento, desenfoque, expansión, color y opacidad.
- Activa 'Inset' para crear una sombra interior.
- Añade más capas para construir efectos complejos.
- Copia el valor o la declaración completa a tu portapapeles.
Tus datos permanecen en tu navegador — no se envían datos a ningún servidor.
Preguntas Frecuentes
- ¿Cuál es la diferencia entre desenfoque y expansión?
- El radio de desenfoque controla cuán suave es el borde de la sombra — un valor más alto crea una sombra más difusa. El radio de expansión expande o contrae el tamaño de la sombra más allá del cuadro delimitador del elemento, sin afectar la suavidad.
- ¿Qué hace la palabra clave inset?
- Inset mueve la sombra dentro del elemento en lugar de fuera. Esto es útil para crear efectos de interfaz de usuario presionados o hundidos.
- ¿Puedo usar múltiples sombras?
- Sí. CSS box-shadow acepta una lista separada por comas de definiciones de sombra. Cada capa es independiente y se componen de atrás hacia adelante.
- ¿Es la salida compatible entre navegadores?
- La propiedad box-shadow es totalmente compatible en todos los navegadores modernos sin prefijos de proveedor. No se necesita prefijo -webkit- o -moz-.