CSS

CSS linear-gradientでグラデーションをかける方法

CSSのlinear-gradientとは?

linear-gradientのイメージ

linear-gradientとはグラデーション効果を入れることができるCSSの関数です。linear-gradientで二色以上の色を指定する事でコンテンツに線形グラデーションを入れることができます

owlくん
gradientグラデーションlinear線形という意味があるんじゃ。
だからlinear-gradientで線形グラデーションという指定ができるんですね。
さとるくん

linear-gradient基本的な書き方

基本

background:linear-gradient (to 方向,開始色,終了色);

例: background:linear-gradient(to right, #ffffe0, #ffa07a);

Web表示

linear-gradientの書き方

イメージ

linear-gradient指定のイメージ

 

 html
<body>
<div class="ligraclass2"> How to write </div>
</body>
 html
/*2左から右にグラデーションをかける*/
.ligraclass2{
background: linear-gradient(to right, #ffffe0, #ffa07a);
border: solid #deb887;
border-radius:30px;
padding:35px;
width:170px;
background-color: #faf0e6;
color: #696969;
font-size: 30px;
margin:100px;
}

radial-gradient基本的な書き方

基本

background:radial-gradient (中心の色,外側の色);

例: background:radial-gradient(#ffffe0, #ffa07a);

Web表示

イメージ

radial-gradientのイメージ

 

 html
<body>
<div class="ligraclass2"> How to write </div>
</body>
 html
/*2左から右にグラデーションをかける*/
.ligraclass2{
background: radial-gradient( #ffffe0, #ffa07a);
border: solid #deb887;
border-radius:30px;
padding:35px;
width:170px;
background-color: #faf0e6;
color: #696969;
font-size: 30px;
margin:100px;
}

linear-gradient向きの指定

linear-gradientで方向を指定する方法

linear-gradientでは、to方向やdegを使用してグラデーションの方向を指定します。

to方向で指定した場合は、上から下、右上から左下といったとうに大まかな方向を指定することができます。degでは数値で角度を指定することができるので細かく向きを指定したい場合はdegで数値指定しましょう。

to 方向で向きを指定

線形グラデーション基本パターン

to 方向で指定した場合、指定した方向に向かって開始色から終了色に向かって色が段階的に変化します。上から下、左から右といった基本的な方向の指定は勿論の事、左上から右下など斜めの方向も簡単に指定する事ができます。

to方向で斜めに指定

to方向で右上から左下に指定する

to bottom rightで指定した場合、左上から右下に向かって色が段階的に変化します。開始点の色を#f4e2d8、終了点の色を#ba5370と指定したので、左上の明るい茶色(#f4e2d8)から右下の海老色(#ba5370)へと段階的に変化します。

Web表示

左上から右下にグラデーション

 html
<body>
<div class="ligraclass7">basic</div>
</body>
 css
.ligraclass7{
background:linear-gradient(to bottom right,#f4e2d8,#ba5370);
border: solid #deb887;
border-radius:30px;
padding:35px;
width:70px;
background-color: #faf0e6;
color: white;
font-size: 30px;
margin:100px;
}

degでグラデーションに角度をつける

degでグラデーションに影をつける

linear-gradientではdegでグラデーションに角度をつける事ができます。0degを指定した場合、下から上方向にグラデーションがかかります。

0degを基準として左回りにグラデーションの方向が変わります。

degで斜めに指定

degでグラデーションの角度を指定する

Web表示

deg45で指定

 

 html
<body>
<div class="ligraclass9">deg</div>
</body>
 html
.ligraclass9{
background:linear-gradient(45deg,#f7ff00,#db36a4);
border: solid #deb887;
border-radius:30px;
padding:35px;
width:70px;
background-color: #faf0e6;
color: white;
font-size: 30px;
margin:100px;
}

三色でグラデーションの作成

linear-gradientで三色グラデーションを作成

linear-gradientで三色を指定すると三色グラデーションを作成することができます。開始色と終了色の間に中間点に色を設定する事で三色グラデーションを作成することができます。

三色グラデーションコード

web表示

三色グラデーションの例

 html
<body>
<div class="ligraclass13">3 color</div>
</body>
 html
.ligraclass13{
background:linear-gradient(to right,#020024,#790920,#00d4ff);
border: solid #deb887;
border-radius:30px;
padding:35px;
width:100px;
background-color: #faf0e6;
color: white;
font-size: 30px;
margin:100px;
}

写真にグラデーションを被せる

オーバーレイで写真にグラデーションをかける

写真の上にグラデーションを被せることができます。このように写真に重ねてグラデーションを表示する事をオーバーレイと言います。

写真の上にグラデーションを表示するには、rgbaを使って色を指定します。rgbaで透明度を指定する事によって下のレイヤの写真を透かして表示する事ができます。

ポイント

  • background:linear-gradient(方向,色,色),url("画像のパス");
  • 色の指定: rgba(赤, 緑, 青, 透明度)
 html
<body>
<div class="ligraclass14">3 color</div>
</body>
 css
.ligraclass14{
background:linear-gradient(to right,rgba(239,255,10,0.1),rgba(239,255,10,0.9)),url("dog.jpg");
background-size:cover;
border: solid #deb887;
border-radius:30px;
padding:35px;
width:100px;
background-color: #faf0e6;
color: white;
font-size: 30px;
margin:100px;
}

グラデーションのサンプルCSSジェネレーター

グラデーションを作成する際にはグラデーションジェネレーターを使うととても円滑にデザイン作業を行う事ができます。ジェネレーターツールは沢山あり、それぞれ特色があるので便利なツールをご紹介していきます。

CSS Gradient

css gradientのホーム画面

CSS GradientはCSSのグラデーションジェネレーターで最も有名といっても過言では無いツールです。視覚的に色の選択を行いカラーコードの数字とRGBAカラー数値を同時に表示する事ができます。

こんな方におすすめ

  • 画像の上にグラデーションを重ねるオーバーレイをしたい方
  • 三色のグラデーションを作成したい方
  • 色の変化の具合を細かく設定したい方

CoolHue2.0

cool hue2.0のホーム画面

CoolHue2.0は二色のグラデーションがプリセットで用意されているツールです。洗練された色の組み合わせが用意されており、数も多すぎないので視覚的かつクイックに色を選択する事ができます。

こんな方におすすめ

  • 素早くグラデーションのカラーコードを選択したい方
  • 明るい色の組み合わせを探したい方
  • 色のサンプルをファイルとしてダウンロードしたい方
  • 二色の組み合わせを探したい方

ColorSpace

ColorSpaceのホーム画面

ColorSpaceはCSS gradientコードを直感的に作成するジェネレーターです。とてもコンパクトで使いやすく色を選択した後、cssコードが画面下に表示されるのでコピペするだけですぐグラデーションを作成する事ができます。

こんな方におすすめ

  • グラデーションを作成した後CSSコードをコピペしたい方
  • 三色グラデーションを作成したい方
  • カラーコードの数値及びRGBコードを取得したい方

 

まとめ

css linear-gradientでグラデーションを指定する方法をご紹介しました。ボリュームが多くなってしまったので要点をまとめます。

  1. 大まかな方向を指定したい場合はto方向を指定します。
  2. 細かな方向を指定したい場合は数値degで指定します。
  3. 三色で指定する場合は、中間色を指定する。
  4. オーバーレイで画像の上にグラデーションを重ねる場合は、rgbaで透明度を指定し、画像の指定をする。
CSS border-radiusの使い方!角を丸くデザインしよう!

続きを見る

-CSS
-

© 2021 OWLVIEW Powered by AFFINGER5