Web制作 CSS

【コピペOK!】CSSグラデーションの作り方まとめ

【コピペOK!】CSSグラデーションの作り方まとめ
CSSでグラデーションってどうやって作るの?

ボタンや背景色でグラデーションのデザインは非常によくあります。

グラデーションと言っても、

  • 方向
  • 線形 or 円形
  • 色の数

など様々な種類があります。

今回はCSSでグラデーションを実装をする方法を解説していきます。

また、コーディングする際にはデザインカンプからグラデーションの情報を読み取る必要があります。

その方法については以下の記事を参照下さい。

参考記事
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

参考記事
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

参考記事
【Adobe XD編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe XD編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

参考記事
【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


CSSグラデーションの作り方

まず基本的なCSSの書き方は以下になります。

/* 線形グラデーション(直線) */
background: linear-gradient(色の指定);

/* 円形グラデーション(放射線状) */
background: radial-gradient(色の指定);

線形グラデーションは『端から端に向かってグラデーション』

円形グラデーションは『中心から外側に向かってグラデーション』

となります。

あとは『色の指定』で色の方向や種類、数などを指定していきます。

今回の記事で基本となるHTMLは以下になります。

<div class="box"></div>

これに対してCSSの『background』を追記していきます。

その他レイアウトのためのCSSは書いていますが、デザインに応じてclass名や数値は変更して下さい。

色について

通常は『#141414』や『#84ffc1』といった16進数で書くことが多いと思いますが、この記事では見て色が分かるように『green』や『yellow』という感じで書いていきます。

 

線形グラデーション(linear-gradient)の書き方

まずは線形グラデーションの書き方から解説していきます。

 

縦向きに線形グラデーション

線形グラデーションの書き方は以下になります。

/* 線形グラデーション縦向き */
.box {
  background: linear-gradient(to 方向, 開始の色, 終了の色);
}

そして上から下にかけて緑色→黄色にグラデーションさせるには以下のように書きます。

/* 線形グラデーション縦向き */
.box {
  background: linear-gradient(to bottom, green, yellow);
}

See the Pen
CSSグラデーション(横向き:左から右)
by junpei (@junpei-sugiyama)
on CodePen.

方向に関してはデフォルトで上から下という向きなので、以下のような書き方でもOKです。

/* 線形グラデーション縦向き */
.box {
  background: linear-gradient(to bottom, green, yellow);
}

/* これでも同じ */
.box {
  background: linear-gradient(green, yellow);
}

色の向きを変えたい場合(下から上)は、色を入れ替えるか『bottom』を『top』にすればOKです。

/* 色を入れ替える */
.box {
  background: linear-gradient(yellow, green);
}

/* 方向をtopに指定 */
.box {
  background: linear-gradient(to top, green, yellow);
}

See the Pen
CSSグラデーション(縦向き:方向指定なし)
by junpei (@junpei-sugiyama)
on CodePen.

 

横向きに線形グラデーション

横向きの線形グラデーションも縦向きと同じで、縦向きでは『bottom』『top』で指定していたところを『right』『left』で指定します。

/* 線形グラデーション横向き(左から右) */
.box {
  background: linear-gradient(to right, green, yellow);
}

/* 線形グラデーション横向き(右から左) */
.box {
  background: linear-gradient(to left, green, yellow);
}

See the Pen
CSSグラデーション(横向き:右から左)
by junpei (@junpei-sugiyama)
on CodePen.

See the Pen
CSSグラデーション(横向き:右から左)
by junpei (@junpei-sugiyama)
on CodePen.

 

斜めに線形グラデーション

斜めにグラデーションの書き方は以下になります。

/* 線形グラデーション斜め */
.box {
  background: linear-gradient(to 終了位置の方向, 開始の色, 終了の色);
}

つまり左上から右下に向かって緑色→黄色にグラデーションさせたい場合は以下のようになります。

/* 線形グラデーション斜め(左上から右下) */
.box {
  background: linear-gradient(to right bottom, green, yellow);
}

終了位置の方向『right bottom』が『右下』となります。

See the Pen
CSSグラデーション(斜め:右から左)
by junpei (@junpei-sugiyama)
on CodePen.

『right bottom』は順番を変えて『bottom right』でも同じです。

ただしこの書き方では以下の4方向のみとなります。

  • right bottom:右下へ
  • right top:右上へ
  • left bottom:左下へ
  • left top:左上へ

さらに角度は45度となり、角度を変えたい場合は次のように書きます。

 

角度を指定して線形グラデーション

これまでは縦、横、45度しか出来ませんでしたが、角度を数値で指定することも可能です。

角度を指定する書き方は以下になります。

/* 線形グラデーション(角度指定) */
.box {
  background: linear-gradient(角度, 開始の色, 終了の色);
}

角度が30度の場合は『30deg』と書きます。

角度とグラデーションの向きの関係は以下になります。

  • 0deg:上へ
  • 45deg:右上へ
  • 90deg:右へ
  • 135deg:右下へ
  • 180deg:下へ
  • 225deg:左下へ
  • 270deg:左へ
  • 315deg:左上へ

0から時計回りに動いていくイメージです。

30度に指定した場合は以下のようになります。

/* 線形グラデーション(30度指定) */
.box {
  background: linear-gradient(30deg, green, yellow);
}

See the Pen
CSSグラデーション(斜め:角度指定)
by junpei (@junpei-sugiyama)
on CodePen.


円形グラデーション(radial-gradient)の書き方

円形グラデーションは放射線状に色が変わっていくグラデーションになります。

『linear』を『radial』に変更すると線形から円形になります。

 

円形グラデーション

円形グラデーションの書き方は以下になります。

/* 円形グラデーション(放射線状) */
background: radial-gradient(内側の色、外側の色);

線形グラデーションと同様に『緑色→黄色』の順に指定すると以下のようになります。

/* 線形グラデーション縦向き */
.box {
  background: radial-gradient(green, yellow);
}

See the Pen
CSSグラデーション(角度指定:30度)
by junpei (@junpei-sugiyama)
on CodePen.

 

片方を透過させるグラデーション

これまで2種類の色を指定してきましたが、片方を透過させることも出来ます。

書き方は至ってシンプルで、片方の色を透明色である『transparent』にすればOKです。

もちろん線形、円形ともに使えます。

 

線形グラデーションで片方を透過

/* 線形グラデーション(片方透過) */
.box {
  background: linear-gradient(green, transparent);
}

See the Pen
CSSグラデーション(透過)
by junpei (@junpei-sugiyama)
on CodePen.

 

円形グラデーションで片方を透過

/* 円形グラデーション(片方透過) */
.box {
  background: radial-gradient(green, transparent);
}

See the Pen
CSSグラデーション(透過・円形)
by junpei (@junpei-sugiyama)
on CodePen.

 

透過率を調整

先ほどまでは完全に透明の透過率100%でしたが、透過率を調整することも可能です。

例えば緑色は透過率0%(透過させない)で、黄色は透過率70%にする場合は以下のようになります。

/* 線形グラデーション(透過率調整) */
.box {
  background: linear-gradient(green, rgba(255,255,0,0.3));
}

RGBは色を表す表現方法です(R:red G:green B:blue

rgbaというのは、色に加えて透過率が設定できます。

例えば黄色だとこのようになります。

6桁(16進数)color: #ffff00;
RGBcolor: rgb(255, 255, 0);
RGBA(透過)color: rgba(255, 255, 0, 0.3);

上記の場合は0.3の部分が透過率となり、

  • 1.0:透過率0%(透過しない)
  • 0.5:透過率50%(半透明)
  • 0.3:透過率70%
  • 0.0:透過率100%(見えない)

となります。

0.3は透明寄りになりますね。

カラーコードについては以下のサイトが参考になります。

WEB色見本 原色大辞典 - HTMLカラーコード

また、16進数からRGBに変換するには以下のサイトが便利です。

RGBと16進数カラーコードの相互変換ツール - PEKO STEP

そして最初のコードで書くとこのようになります。

See the Pen
CSSグラデーション(透過率調整)
by junpei (@junpei-sugiyama)
on CodePen.

下の黄色が少し薄くなっているのが分かるかと思います。


グラデーションの色が変わる位置を調整

これまでは色の変わる位置はデフォルトでしたが、位置を調整することが可能です。

例えば横向きの線形グラデーションの場合、左から50%(中央)までは緑色で、左から50%の位置から100%(右端)までをグラデーションにしたい場合は以下のように書きます。

/* 線形グラデーション(開始位置調整) */
.box {
  background: linear-gradient(to right, green 50%, yellow);
}

See the Pen
CSSグラデーション(開始位置調整)
by junpei (@junpei-sugiyama)
on CodePen.

円形グラデーションも同様です。

/* 円形グラデーション(開始位置調整) */
.box {
  background: radial-gradient(green 50%, yellow);
}

See the Pen
CSSグラデーション(開始位置調整:円形グラデーション)
by junpei (@junpei-sugiyama)
on CodePen.

 

グラデーションを3色以上にする方法

これまでは2色で設定してきましたが、3色以上にすることも可能です。

これは単純に色を追加すればOKです。例えば真ん中にオレンジ色を追加すると以下のようになります。

/* 線形グラデーション(2色) */
.box {
  background: linear-gradient(to right, green, yellow);
}

/* 線形グラデーション(3色) */
.box {
  background: linear-gradient(to right, green, orange, yellow);
}

See the Pen
CSSグラデーション(3色:線形グラデーション)
by junpei (@junpei-sugiyama)
on CodePen.

円形グラデーションも同様です。

/* 円形グラデーション(3色) */
.box {
  background: radial-gradient(green, orange, yellow);
}

See the Pen
CSSグラデーション(3色:円形グラデーション)
by junpei (@junpei-sugiyama)
on CodePen.

これも%で位置の調整は可能です。

ちなみに青色も追加して4色だとこのようになります。

See the Pen
CSSグラデーション(4色:線形グラデーション)
by junpei (@junpei-sugiyama)
on CodePen.

See the Pen
CSSグラデーション(4色:円形グラデーション)
by junpei (@junpei-sugiyama)
on CodePen.

この記事では原色を使っているのでかなりどぎつい色になっていますね。。。


画像にグラデーションを重ねる

グラデーションは画像に重ねることも可能です。

例えば画像に『緑色の透過率50%、黄色の透過率50%で右下へ』というグラデーションを重ねる場合は以下のようになります。

/* 画像に重ねる */
.box {
  background: linear-gradient(to right bottom, rgba(0, 128, 0, .5), rgba(255, 255, 0, .5)), url(画像パス);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

透過させないと画像の上に色が塗りつぶされるだけになってしまうのでご注意下さい。

background-positionなどは必要に応じて書いて下さい。

See the Pen
CSSグラデーション(画像に重ねる)
by junpei (@junpei-sugiyama)
on CodePen.

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
740部以上販売し、レビューは410件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高9万PV▶︎Twitterのフォロワーは6300人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計750部&450万円突破

-Web制作, CSS