La propiedad CSS box-shadow pinta una o varias sombras alrededor de un elemento sin cambiar el flujo del documento. ShadowStack expone solo valores presentes en la declaración copiada, para comparar directamente vista y código. Cada capa conserva su orden de pintura, estado inset, cuatro longitudes en píxeles, color hexadecimal y opacidad.

Inset cambia la región pintada, no los valores

Una sombra exterior se pinta fuera del border box y puede sugerir elevación. Añadir inset la pinta dentro del borde para sugerir una superficie pulsada, un hueco o sombreado de borde. ShadowStack coloca inset al principio de la capa canónica pero mantiene X, Y, desenfoque, expansión, color y opacidad. Como cambia la geometría, los mismos números pueden verse mucho más fuertes dentro. Empieza con menor opacidad y desenfoque moderado y revisa padding y bordes en el componente real.

Combina capas inset y exteriores deliberadamente

Una declaración puede mezclar capas exteriores e inset. El orden sigue explícito, pero ocupan regiones distintas y no son escalones de profundidad intercambiables. Selecciona la pestaña correcta antes de editar y lee la etiqueta inset antes de reordenar. Un patrón moderado combina una capa exterior sutil para separar con un brillo o sombreado inset de baja opacidad para dar detalle. No uses ninguna sombra como único indicador de foco, error o selección, porque puede desaparecer con otros fondos o configuraciones de alto contraste.

Verifica el CSS en su componente real

ShadowStack representa la declaración copiada con el motor actual del navegador, pero la vista previa no certifica compatibilidad ni accesibilidad. Pega la propiedad en el componente real y prueba cada navegador, ancho adaptable, fondo y contenedor con overflow compatible. Un desenfoque amplio puede quedar recortado por un ancestro y una sombra inset puede cubrir contenido o indicadores de foco. Revisa el foco de teclado en cada estado, mide el contraste de texto y controles con una herramienta dedicada y conserva un borde u otra distinción cuando la interfaz dependa de límites claros. La cápsula no guarda ajustes ni historial; conserva el CSS aceptado en tu hoja con control de versiones antes de recargar.