グラデーションの指定【2色】

2つ以上の色を使ったグラデーションの指定について書きます。

【やり方】

まずはこのように指定します。

 background: linear-gradient(#9EF0A6, #ffffff);

この場合最初に指定した色(#9EF0A6)が上に表示され次に指定した色(#ffffff)が下に表示されます。

(グラデーションの方向の指定したい時は、このようにbackground: linear-gradient(90deg,#9EF0A6, #ffffff);指定します。90degで左から右にかけて表示されます。)

すると・・・

このように表示されます。

【3色指定したい場合】

先程のグラデーション(緑から白)の間に水色を入れる場合

background: linear-gradient(#9EF0A6,#80E8FF, #ffffff);

表示したい順番に色を指定するだけでできます。

すると・・

このように表示されます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です