CSS linear-gradient

Question

前提・実現したいこと

CSSのlinear-gradientを使い、斜めにグラデーションをかけてるのですが、
赤い部分はグラデーションになりますが、緑の部分はなってません
緑のほうにもグラデーションをかける方法はありますでしょうか？

該当のソースコード

<style>
body,html{
background:linear-gradient(45deg, red 50%,black, green 50%, black);
}
</style>

Answer 1

body,html{
background:linear-gradient(45deg, red 50%,black, green 50%, black);
}

左から開始位置を指定してきますが、上記だと、0% が無指定なので、0%から50%までがredになります。

下記のように指定すれば、0%から50%までは黒から赤のグラデーション、50%から100%までが緑から黒のグラデーションになります。

body,html{
background:linear-gradient(45deg, black 0%,  red 50%,green 50%, black 100%);
}

0% と 100% を省略しても同じ結果になります。

body,html{
background:linear-gradient(45deg, black, red 50%,green 50%, black);
}

Answer 2

red 50%, black, green 50%, redもgreenも、同じ位置の50%だからなのでは？greenの値を変えてみてはどうでしょうか。blackも外してみるとか。