Generador de sombras de cuadros CSS
Crea valores de sombras de cuadros visualmente.
¿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.
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.
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.