Acerca de esta herramienta
Este generador crea una sola capa de sombra de caja con desplazamientos horizontal y vertical, radios de desenfoque y expansión, color, opacidad e inset. La tarjeta aplica al instante los parámetros válidos.
Cómo usarla
- Ajusta los desplazamientos horizontal y vertical y el radio de desenfoque.
- Configura el radio de expansión, el color y la opacidad de la sombra.
- Activa la sombra interior inset si la necesitas.
- Comprueba la vista previa y copia el CSS o restablece la sombra predeterminada.
Ejemplos de uso
- Un desplazamiento horizontal negativo mueve la sombra hacia la izquierda.
- Una expansión positiva amplía la sombra y una negativa la reduce.
- inset sitúa la sombra dentro de la caja.
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);Funcionamiento y explicación del CSS
box-shadow acepta offset-x, offset-y, blur-radius, spread-radius y color, además de inset opcional. Los desplazamientos y la expansión pueden ser negativos; el desenfoque debe ser no negativo. La opacidad controla la mezcla entre la sombra y el fondo.
Usos habituales
- Crear profundidad en paneles, ventanas modales y botones.
- Comparar sombras suaves y nítidas.
- Diseñar sombras interiores para elementos de formulario.
Privacidad
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
FAQ
¿Qué diferencia hay entre blur y spread?
blur controla el desenfoque de los bordes; spread determina cuánto crece o se reduce la forma de la sombra antes de desenfocarse.
¿Qué es inset?
inset cambia la sombra exterior por una sombra en el interior de la caja.
¿box-shadow admite valores negativos?
Sí en los desplazamientos horizontal y vertical y en la expansión. El radio de desenfoque no puede ser negativo.
¿La herramienta admite varias capas de sombra?
Esta página genera una sola capa. CSS permite combinar varias sombras box-shadow separándolas con comas.