CSSでグラデーションを使う方法

グラデーションを使う方法

まず初めに、cssでグラデーションを使うときはbackgroundプロパティを使います。

グラデーションのかけ方

では、グラデーションのかけ方についてご紹介していきます。

線型(直線)

線型(直線)のグラデーションをを使うときは、linaer-gradientを使用します。
それでは、早速使い方を見ていきましょう。

セレクタ{
  background: linear-gradient(いろが変わっていく方向、開始色、終了食);
}

かっこの中に、色の指定はもちろんできますし、さらに、グラデーションの方向を指定することもできます。

これを、実際に実装してみると以下のようになります。

div{
  background: linear-gradient(90deg,#ed7a94,#e7c0f7);
}

上記のように指定することで、左から右へと色が変化していくのがわかると思います。

円形

次に、円形のグラデーションをを使うときは、radial-gradientを使用します。
指定方法は先程の洗浄グラデーションと似ています。

セレクタ{
  background: radial-gradient(形状や中心位置、開始色、終了食);
}

円形グラデーションでは、中心位置や形状を変化することができます。

これを、実際に実装してみると以下のようになります。

div{
  background: linear-gradient(90deg,#ed7a94,#e7c0f7);
}

上記のように指定することで、中心から色が変化していくのがわかると思います。

今回のグラデーションはいかがでしたでしょうか。

いろんな色と組み合わせることで
様々な表現が可能だと考えると
なんだかワクワクしますね！！