cssでグラデーションを作ってみよう

いろんなホームページを見ているとグラデーションがかかっているようなサイトがありますよね。画像を加工してる場合もありますが、cssでもグラデーションをかけることができます。cssでグラデーションをかけたい方は、今回ご紹介する方法を使っていろんな場面でグラデーションをかけて見てください。では、その方法をご紹介したいと思います。

htmlの構造

htmlの構造は、サンプルなので非常にシンプルにいかせていただきます。
divタグ１こにいたしましょう。

<div class="bg_gradient"></div>

上記のコードにcssを当てて行こうと思います。

cssのご紹介

cssでグラデーションをかけるには、linear-gradientを使用します。
使用方法は次の通りです。

<style>
.bg_gradient{
 width:100%;
 height:200px;
 background:linear-gradient(to left,blue 0%,red 90%);
}
</style>

上記のサンプルコードを実装したのが次の通りとなります。

このto leftを変化させることでいろんな方向から、グラデーションをかけることができます。

to bottomにすることで、下からグラデーションをかけることができます。

また、45degなど角度を指定することで斜めも可能です。

グラデーションの色は２色以外に３色、４色など設定することも可能です。

上記のように４色にすることができます。cssのコード自体は非常に簡単です。

background:linear-gradient(to left,blue 0%,green 50%,red 70%,yellow 100%);

このように%ごとに色を指定するだけで色を増やすことができます。

まとめ

今回はグラデーションをcssを記述する方法をご紹介させていただきました。
今まで、グラデは画像でかけていた方や、cssでグラデーションのかけ方がわからないという方のお力になれれば幸いです。