CSS説明補足 background:linear-gradient

https://arts-factory.net/lineargradient/#toc3

簡単と言いながら謎の20%がどこから？ 0～50％までは赤、50％～20％で赤から青に変化、20％から100％は青色としたい場合は次のように書きます。

.box{
    background:linear-gradient(to right , #F00 50%, #00F 80%);
}

この図でわかりやすい。