css3 – box-shadow deixa as animações do chrome mais lento

To com um problema com o box-shadow, tenho a seguinte linha: box-shadow: -300px -300px 300px var(--roxo) inset;
Toda vez que usoo box-shadow com um tamanho bem alto como neste caso as animações e transições ficam muito lento quase travando ou quando eu passo o mouse por exemplo em cima de um botão com :hover o box-shadow dá uma tremida, mesmo que eles não se comuniquem. Queria saber como resolver o problema das animações e transições ficarem lentas e bugadas quando o box-shadow fica muito alto.