Переменная в linear gradient

[fori]

Здравствуйте, скажите пожалуйста как поставить переменною в linear gradient
Тоесть

<div></div>
<style>
div{
width:80vw;
height:10vh;
background: linear-gradient(to left, blue 50%, green 50%);
}
</style>

работает

<div></div>
<style>
--val:50%;
div{
width:80vw;
height:10vh;
background: linear-gradient(to left, blue --val, green --val); 
}
</style>

не работает

[voraa]

<div></div>
<style>
:root{
--val:50%;
}
div{
width:80vw;
height:10vh;
background: linear-gradient(to left, blue var(--val), green var(--val));
}
</style>