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.
Usa una capa exterior exacta
Empieza con el documento inicial: X 0 px, Y 12 px, desenfoque 28 px, expansión -8 px, color #0F172A y opacidad 28 por ciento. El resultado es box-shadow: 0px 12px 28px -8px rgb(15 23 42 / 0.28);. La expansión negativa contrae la forma antes del desenfoque y mantiene la zona oscura cerca de la tarjeta. Copia la declaración, pruébala en el fondo real y cambia un número cada vez si necesitas menos separación u otra dirección aparente.
Revisa el límite, no solo el desenfoque
Una sombra suave no debe ser la única característica que separe una tarjeta interactiva del fondo. Revisa tamaño de texto normal y ampliado, foco de teclado y preferencias de alto contraste. Si el límite deja de verse, añade un borde explícito o diferencia de superficie en el CSS del componente en lugar de oscurecer cada vez más la sombra. ShadowStack produce solo box-shadow para que esas decisiones independientes sigan visibles en tu hoja.
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.