美しいグラデーションをCSSで簡単に！「CSS Gradient」

WEB

2019.09.192019.09.17

2018年に引き続き、2019年もグラデーションはWEBサイトに多く使われることになりそうです。

いくつかグラデーションが印象的なサイトを集めてみました。

株式会社 New Stories
薄く入ったドットの升目、オンマウスで浮かび上がる地図など、洗練されてますね。

慶應義塾大学 SFC Open Research Forum 2018
グラデーションとゆらゆら動く球体が印象的なサイトです。

株式会社Donatello
イラストにも見出しにもボタンにも、青から明るい緑のグラデーションが使われています。

もはや定番ともいえるグラデーション。
そこで、CSSで簡単にグラデーションを取り入れられるツールを探してきました。

CSS Gradient
CSS Gradientの使い方
CSS Gradient まとめ

CSS Gradient

「CSS Gradient」です。

CSS Gradientの使い方

CSS Gradientの画面の見方

まずは画面の見方を説明します。

初期画面ではスライダーに3つのカーソルがあります。

それぞれ「0%（スタート部分）」の色、「50%（真ん中）」の色、「100%（終わり）」の色を指しています。
スライダーは左右に移動することができます。
このカーソルをクリックすると下の編集エリアで編集できるようになります。

編集エリアでは色や透明度をピッカーまたは数値で設定することができます。

色を追加する、減らす

色を追加するには、スライダーの何もない部分をクリックします。
右の色一覧にも追加されます。

色を減らすには、右下の色一覧の「×」をクリックします。
カーソルも消えます。

グラデーションの形状や角度

編集エリアの下ではグラデーションの形状（線状・円形）や角度の設定もできます。
イメージからの色抽出や、プリセットカラーからの選択もできます。

生成されたコードをコピペ！

コードは画面下に表示されます。

右上の「Max Compatibility」にチェックを入れるとベンダープレフィックス付きで書き出してくれます。

backgroundを指定したい要素にこのコードを貼りつければ完成です。

グラデーションを使ったサンプル

例えば下のサンプルでは、

美しいグラデーションでサイトを彩ろう

コードはこのようになっています。

.gradebox {
width: 100%;
padding: 20px;
color: #fff;
/*ここから下がコピペ部分*/
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(235,29,29,1) 50%, rgba(252,179,69,1) 100%);
}

また、グラデーションを半透明にすることで、背景写真に重ねてオーバーレイ風にすることもできます。

写真に
透明な
グラデーションを
重ねて
オーバーレイ

半透明はCSS Gradientの「A」値を「50」にすればOK。

コードはこのようになっています。
グラデーションのコードの後ろに背景に置きたい画像のURLを指定し、さらにbackground-sizeにcoverを指定しています。

.gradebox {
width: 100%;
padding: 20px;
color: #fff;
background: linear-gradient(90deg, rgba(131,58,180,0.5) 0%, rgba(235,29,29,0.5) 50%, rgba(252,179,69,0.5) 100%),url(https://www.nullllog.com/wp/wp-content/uploads/2019/09/grade05.jpg);
background-size: cover;
}