Generador de sombras de cuadros CSS
Crea valores de sombras de cuadros visualmente. Establezca el desplazamiento horizontal y vertical en píxeles, el radio de desenfoque (borde suave), la extensión (aumente o reduzca la sombra antes de desenfocarla), el color, la opacidad y el recuadro opcional para las sombras interiores. El cuadro de vista previa se actualiza en vivo; Copia la declaración completa de box-shadow en su CSS. Comprenda cómo cada parámetro cambia la elevación y la profundidad sin prueba y error en devtools.
X (px)
Y (px)
Desenfoque (px)
Extensión (px)
Color
Opacidad (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
¿Cómo construir una sombra de cuadro
1. Establezca el desplazamiento X e Y: la X positiva mueve la sombra hacia la derecha, la Y positiva la mueve hacia abajo.
2. Ajuste el desenfoque (suavidad) y la extensión (tamaño antes del desenfoque).
3. Seleccione el color de la sombra y opacidad.
4. Alternar inserción si la sombra debe aparecer dentro del cuadro; copiar CSS.
Recetas de sombras
Elevación de tarjeta suave
desplazamientoY 8px, desenfoque 24px, extensión 0, negro con 18% de opacidad — una tarjeta flotante de estilo material: box-shadow: 0 8px 24px rgba(20,20,20,0.18).
Nítido sombra paralela
desenfoque 0, extensión 0, desplazamientoY 4px: borde duro como una pegatina levantada ligeramente de la página.
Insertar botón presionado
Habilitar inserción con desenfoque pequeño: simula un control presionado o empotrado dentro del elemento.
¿Cuándo usar esta herramienta
• Cuando ajustas la profundidad de la interfaz de usuario para tarjetas, modales y botones.
• Cuando aprendes en qué se diferencia el desenfoque de la extensión.
• Cuando documentas tokens de diseño con valores de sombra exactos.
¿Cuándo elegir otra cosa
• Cuando necesitas múltiples sombras apiladas: copia la primera capa aquí y luego agrega más en CSS.
• Cuando desee sombra de texto: propiedad diferente con sintaxis similar.
• Cuando necesites sombra paralela en formas PNG irregulares, filtro: sombra paralela() puede funcionar mejor.
Leer los cuatro números
box-shadow: 0 8px 24px 0 significa x=0, y=8px hacia abajo, desenfoque=24px, spread=0. Omita la extensión y la extensión predeterminada de los navegadores es 0. El desenfoque grande con desplazamiento cero crea un brillo; un desplazamiento grande con un pequeño desenfoque crea luz direccional.
Sombras en capas
Sombras múltiples separadas por comas: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); Las primeras sombras se pintan debajo de las posteriores. Combine una sombra oscura y densa con una amplia y clara para obtener una profundidad realista.
Accesibilidad y rendimiento
Las sombras intensas en grandes áreas animadas pueden costar tiempo de pintura a la GPU. Prefiere sombras sutiles para interfaces de usuario con gran densidad de datos. Asegúrese de que los elementos enfocados permanezcan visibles; no confíe únicamente en la sombra para mostrar el estado; emparejar con borde o contorno para usuarios de teclado.
Preguntas frecuentes
¿Cuál es la sintaxis de sombra de caja?
sombra de caja: offset-x offset-y desenfoque-radius spread-radius color; La palabra clave insertada opcional crea una sombra interior.
¿Desenfocar o extender?
El desenfoque suaviza el borde de la sombra. La extensión expande o contrae la forma de la sombra antes de desenfocarla: la extensión positiva aumenta, la negativa se reduce.
¿Qué unidades debo usar?
Esta herramienta genera píxeles (px), la opción más común para las sombras de la interfaz de usuario de la pantalla.
¿Qué hace el recuadro?
El recuadro dibuja la sombra dentro del cuadro de borde del elemento, útil para entradas hundidas o pozos.
¿El color de la sombra puede ser semitransparente?
Sí. La opacidad se aplica al color elegido, lo que produce una salida rgba para bordes suaves sobre fondos variados.
¿Se envían los valores a un servidor?
No. La vista previa y CSS son locales.
¿Es gratis?
Sí, no se necesitas cuenta.