CSS サイトをより魅力的にするグラデーションの設定方法

グラデーションを使うことで、単色よりも奥行きや動きのあるデザインを作成できます。
また、色彩の組み合わせや表現方法によって、ユーザーの注目を集め、印象に残るデザインを作成できます。
そんなグラデーションを、CSSで簡単に設定することができます。この投稿では、その方法を紹介します。

線形グラデーション

CSSでグラデーションを設定するには、linear-gradient() や radial-gradient() などの関数を使用します。

background-image: linear-gradient(to right, red, blue);

この例では、左から右に、赤から青へのグラデーションが設定されます。

円形グラデーション

background-image: radial-gradient(circle, red, blue);

この例では、中心から外側に向かって、赤から青へのグラデーションが設定されます。

グラデーションのいろいろな設定

グラデーションの色と位置

グラデーションの色は、カンマで区切って指定できます。
色の代わりに、transparent を使用して透明な部分を設定することもできます。
色の位置は、to キーワード(例：to right)や角度（00deg）で指定できます。

background-image: linear-gradient(45deg, red, blue);

この例では、赤から青へのグラデーションが45度回転して設定されます。

グラデーションの繰り返し

repeating-linear-gradientやrepeating-radial-gradientを使用すると、グラデーションを繰り返し表示できます。

background-image: repeating-linear-gradient(
        to right,
        red ,
        blue 20px
      );

この例では、左から右、赤から青へのグラデーションが20pxの幅で繰り返し表示されます。

グラデーションのプレフィックス

ブラウザによっては、グラデーションのプレフィックスが必要になる場合があります。

background-image: -webkit-linear-gradient(to right, red, blue);

まとめ

CSSでグラデーションを設定するには、linear-gradient() や radial-gradient() などの関数を使用します。
様々なグラデーションを設定して、ウェブサイトのデザインをより魅力的にしましょう。