CSS でグラデーション描画

Global Summit 明けで Web 関連の勉強再開

実装よりの内容から趣向を変えてちょっとデザイン絡みの内容をやってみます

今回は最近よく見るグラデーションの背景を画像を使わず CSS で描画する方法

Gradient

スポンサードリンク

CSS のコードは linear-gradient を背景に利用したこんな感じで

.gradient {
    background-image: linear-gradient(to right, #FC466B 0,  #3F5EFB 100%);
}
.label {
    text-align: center;
    color: #fff;
}

HTML 側をこうすれば上記のグラデーションが表示できました

<div class="gradient">
    <p class="label">Gradient</p>
</div>

linear-gradient は第一引数に方向、第二引数以降にカラーコードと開始地点を必要なだけ追記すればよいようです

方向は deg を使えば角度で指定することもできるようです

.gradient {
    background-image: linear-gradient(0deg, #FC466B 0,  #3F5EFB 100%);
}

to Top

3色以上指定することもでき、開始地点を比率じゃなくてピクセル数などを指定することもできました

.gradient {
    background-image: linear-gradient(to right, #1a2a6c 0, #b21f1f 100px, #fdbb2d 100%);
}

left 100 px

画像ファイルが不要なため通信量が削減できてよいですね