Home
CSS
コピペで完了!CSSグラデーション(linear-gradient)まとめ

コピペで完了!CSSグラデーション(linear-gradient)まとめ

公開日
2021.04.23
更新日
2022.04.02
コピペで完了!CSSグラデーション(linear-gradient)まとめ

どうも!かけちまるです!

CSSで背景色を指定するbackgroundプロパティでグラデーションを表現する方法を解説します。
backgroundプロパティで表現できるグラデーションは4種類あり線形linear-gradient()、円形radial-gradient()、扇形conic-gradient()、反復repeating-linear-gradient&repeating-radial-gradient&repeating-conic-gradientがあります。

線形
円形
扇形
反復

この記事では、よく使うであろう線形linear-gradient()のグラデーションについて詳しく解説していきます。
線形linear-gradient()のグラデーションの解説後に他の3種類(円形、扇形、反復)についての軽く解説していきます。

グラデーションの書き方ってよく忘れてしましませんか?僕だけでしょうか?
なので、どれもコピペで使えるようにしていくのでぜひ参考にしてください。

この記事を読むと、

  • ・CSSでグラデーションを表現する方法が一通りわかる
  • ・線形linear-gradient()のグラデーションについて詳しくわかる
  • ・コピペでコードを使える
  • ・特殊な表現も少し知ることができる

というようなメリットがあります。

基本的な書き方

まずは、基本的な書き方からです。
下記のコードが基本となってアレンジしていく感じになります。

CSS
コピー
background: linear-gradient(to bottom, red, yellow); background: -webkit-linear-gradient(top, red, yellow); background: -moz-linear-gradient(top, red, yellow); /* ↓上のコードを解説↓ */ background: linear-gradient(to ゴール位置, 開始色, 終了色); background: -webkit-linear-gradient(スタート位置, 開始色, 終了色); background: -moz-linear-gradient(スタート位置, 開始色, 終了色);

注意するべき点は、方向指定の方法です。
通常の書き方では、ゴール位置を指定するのに対して、ベンダープレフィックスを使った書き方では、スタート位置を指定する書き方になるのでややこしいですが注意が必要ですね。

まぁ個人的にはベンダープレフィックスはつけなくていいんじゃないかと思っています。
古いブラウザにも対応させてあげたいと思う親切で優しい方は別ですがね。

対応ブラウザ

グラデーションの対応ブラウザ状況ですがほぼ全てのブラウザに対応しています。
ちなみに2014年くらいからベンダープレフィックスはつけなくてもほぼ全てのブラウザに対応しています。

IE Edge Firefox Chrome Safari iOS Android
ベンダープレフィックスあり 10~ 12~ 3.6~ 10~ 5.1~ 6.1~ 89
ベンダープレフィックスなし 10~ 12~ 16~ 26~ 6.1~ 7~ 89

数値的には全体の96.96%の対応状況なので心配なく使えるのではないでしょうか。

ベンダープレフィックスとは?

ベンダープレフィックスは「-webkit-」とか「-moz-」とかのことをいいます。
他にも、「-o-」「-ms-」があり、これをつけることによって古いバージョンのブラウザにも対応することができるのです。

新しいCSSプロパティをブラウザが試験段階で実装する時につけるもので、ブラウザのバージョンが上がるとそのCSSプロパティは標準化されていきベンダープレフィックスをつけなくてOKになります。

ベンダープレフィックスは全部で4種類あってそれぞれどのブラウザ用か決まっているんです。

  • -webkit-
    Chrome、Safari、新しいOpera、のためのやつ
  • -moz-
    Firefoxのためのやつ
  • -ms-
    IEとEdgeのためのやつ
  • -o-
    古いOperaのためのやつ

ちなみに、ベンダープレフィックスはベンダー接頭辞と呼ばれることもあるっぽいです。

線形グラデーション

方向の指定(上から下)

上から下に向かってグラデーションします。
通常の記述では、to bottomで下に向かって、ベンダープレフィックス付きでは、topで上からスタートです。

上から下
CSS
コピー
background: linear-gradient(to bottom, red, yellow); background: -webkit-linear-gradient(top, red, yellow); background: -moz-linear-gradient(top, red, yellow);

方向の指定(左から右)

左から右に向かってグラデーションします。
通常の記述では、to rightで右に向かって、ベンダープレフィックス付きでは、leftで左からスタートです。

左から右
CSS
コピー
background: linear-gradient(to right, red, yellow); background: -webkit-linear-gradient(left, red, yellow); background: -moz-linear-gradient(left, red, yellow);

角度をつける(対角にする)

グラデーションに対角の角度をつけます。
角度をつける時も「top」「right」「bottom」「left」が使えます。
指定方法は、「bottom right(右下)」「top left(左上)」といった感じで指定します。
しかし、この書き方は対角しか指定できないので細かく指定したいときは、次に紹介する角度をdegで指定する方法を使いましょう。

top left
top right
bottom left
bottom right
CSS
コピー
background: linear-gradient(to bottom right, red, yellow); background: -webkit-linear-gradient(top left, red, yellow); background: -moz-linear-gradient(top left, red, yellow);

角度をつける(細かく調整)

グラデーションに細かく角度をつけます。
指定方法は、60degのようにつけたい角度にdegをつけて指定します。

角度は、0degは下から上90degは左から右180degは上から下270degは右から左というように時計回りでスタート位置が変わっていきます。

degの角度見本
角度を60°に指定する
CSS
コピー
background: linear-gradient(60deg, red, yellow); background: -webkit-linear-gradient(30deg, red, yellow); background: -moz-linear-gradient(30deg, red, yellow);

ベンダープレフィックス付きの場合はdegを下記の式で求めます。

degの求め方
  • ベンダープレフィックス付きのdeg = 90deg – 通常で指定したdeg

先ほどのCSSを参考にすると90deg – 60deg = 30deg なのでベンダープレフィックス付きでは30degで指定しています。

透過も使える

もちろん色の指定方法を変えれば透過のグラデーションも表現することができます。

透過も使える
CSS
コピー
background: linear-gradient(to bottom, rgba(255,0,0,0.5), rgba(255,255,0,0.5)); background: -webkit-linear-gradient(top, rgba(255,0,0,0.5), rgba(255,255,0,0.5)); background: -moz-linear-gradient(top, rgba(255,0,0,0.5), rgba(255,255,0,0.5));

3色以上を指定する

色の指定を増やせばたくさん色を使ったグラデーションを表現できます。

3色以上を指定する
CSS
コピー
background: linear-gradient(to bottom, red, yellow, green, blue); background: -webkit-linear-gradient(top, red, yellow, green, blue); background: -moz-linear-gradient(top, red, yellow, green, blue);

色の切り替え位置を指定する

今まで色の切り替え位置を指定しなかったので等間隔でグラデーションがされていました。
色の切り替え位置を指定するには、色指定の後にpxか%で数値を指定します。
下記のCSSでは0%〜60%までが赤色で、60%〜80%にかけて黄色に変化し、80%〜は黄色になります。

色の切り替え位置参考画像
色の切り替え位置
CSS
コピー
background: linear-gradient(to bottom, red 60%,yellow 80%); background: -webkit-linear-gradient(top, red 60%,yellow 80%); background: -moz-linear-gradient(top, red 60%,yellow 80%);

グラデーションを重ねる

linear-gradient(),区切りで複数記述することでグラデーションを重ねることができます。
今まで一方向のみにしか表現できませんでしたが、グラデーションを重ねることによって中心から広がるようなグラデーションも表現することができます。

重ね順は上に書いたものが一番上で、下に書いたものが一番下というようにレイヤーが重なっていきます。
「色の透過」「色の切り替え位置」「角度」を細かく調整する必要があるので上級者向けかもしれませんね。

グラデーションを重ねる
CSS
コピー
background: linear-gradient(235deg, red, transparent 65%), linear-gradient(125deg, yellow, transparent 65%), linear-gradient(0deg, green, transparent 65%); background: -webkit-linear-gradient(-145deg, red, transparent 65%), -webkit-linear-gradient(-35deg, yellow, transparent 65%), -webkit-linear-gradient(90deg, green, transparent 65%); background: -moz-linear-gradient(-145deg, red, transparent 65%), -moz-linear-gradient(-35deg, yellow, transparent 65%), -moz-linear-gradient(90deg, green, transparent 65%);

円形グラデーション

円形グラデーションは、中心から円形状に広がりながら色が変化していくグラデーションです。
ここでは、linear-gradient()radial-gradient()に変わっただけなので説明は割愛します。
こちらで紹介している指定方法以外にも表現できる指定方法がたくさんあるので調べてみるとようと思います。

基本

円形基本
CSS
コピー
background: radial-gradient(red, yellow); background: -webkit-radial-gradient(red, yellow); background: -moz-radial-gradient(red, yellow);

色の切り替え位置の変更

円形切り替え位置
CSS
コピー
CSSbackground: radial-gradient(red 50% ,yellow); background: -webkit-radial-gradient(red 50%,yellow); background: -moz-radial-gradient(red 50%,yellow);

扇形グラデーション

扇形グラデーションは、中心点の周りを回りながら色が変化していくグラデーションです。
ここでも、linear-gradient()conic-gradient()に変わっただけなので説明は割愛します。
こちらで紹介している指定方法以外にも表現できる指定方法がたくさんあるので調べてみるとよいと思います。

基本

扇形基本
CSS
コピー
background: conic-gradient(red, yellow); background: -webkit-conic-gradient(red, yellow); background: -moz-conic-gradient(red, yellow);

反復グラデーション

反復グラデーションは今まで紹介してきたlinear-gradient()などの先頭にrepeatingをつけることで実現できます。repeating-linear-gradient()のようになります。

この方法を使うと、ボーダー柄とかチェック柄を表現できます。

基本

ボーダー柄の書き方をご紹介します。
ここで大事なのが色の切り替え位置の指定で下記のCSSを参考に説明しますね。
下記のCSSでは、赤色が0px〜5pxで黄色が5px〜10pxでそれが範囲内で繰り返されます。
つまり、赤色5px、黄色5pxのボーダーを指定しています。

色がグラデーションにならないのは赤色が5pxまでで黄色が5pxからで色が変わる範囲が0pxになっているためです。

反復基本
CSS
コピー
background: repeating-linear-gradient(to bottom right, red 0px 5px, yellow 5px 10px); background: -webkit-repeating-linear-gradient(top left, red 0px 5px, yellow 5px 10px); background: -moz-repeating-linear-gradient(to top left, red 0px 5px, yellow 5px 10px);

複数指定

今までのことを駆使するとこんな感じのことができます。
本当はもっときれいにできたらよかったんですけど色選びが難しいです。

反復応用
CSS
コピー
background: repeating-linear-gradient(190deg, rgba(57,247,231,0.3) 40px, rgba(194,43,159,0.3) 80px, rgba(225,36,103,0.3) 90px, rgba(253,29,54,0.3) 100px, rgba(152,141,116,0.3) 130px, rgba(51,252,177,0.3) 180px, rgba(115,252,123,0.3) 210px, rgba(179,252,69,0.3) 240px), repeating-linear-gradient(-190deg, rgba(57,247,231,0.5) 30px, rgba(194,43,159,0.5) 80px, rgba(225,36,103,0.5) 90px, rgba(253,29,54,0.5) 100px, rgba(152,141,116,0.5) 110px, rgba(51,252,177,0.5) 180px, rgba(115,252,123,0.5) 210px, rgba(179,252,69,0.5) 240px), repeating-linear-gradient(15deg, rgba(57,247,231,0.8) 80px, rgba(194,43,159,0.8) 160px, rgba(225,36,103,0.8) 260px, rgba(253,29,54,0.8) 300px, rgba(152,141,116,0.8) 360px, rgba(51,252,177,0.8) 380px, rgba(115,252,123,0.8) 390px, rgba(179,252,69,0.8) 400px); background: -webkit-repeating-linear-gradient(-100deg, rgba(57,247,231,0.3) 40px, rgba(194,43,159,0.3) 80px, rgba(225,36,103,0.3) 90px, rgba(253,29,54,0.3) 100px, rgba(152,141,116,0.3) 130px, rgba(51,252,177,0.3) 180px, rgba(115,252,123,0.3) 210px, rgba(179,252,69,0.3) 240px), -webkit-repeating-linear-gradient(280deg, rgba(57,247,231,0.5) 30px, rgba(194,43,159,0.5) 80px, rgba(225,36,103,0.5) 90px, rgba(253,29,54,0.5) 100px, rgba(152,141,116,0.5) 110px, rgba(51,252,177,0.5) 180px, rgba(115,252,123,0.5) 210px, rgba(179,252,69,0.5) 240px), -webkit-repeating-linear-gradient(75deg, rgba(57,247,231,0.8) 80px, rgba(194,43,159,0.8) 160px, rgba(225,36,103,0.8) 260px, rgba(253,29,54,0.8) 300px, rgba(152,141,116,0.8) 360px, rgba(51,252,177,0.8) 380px, rgba(115,252,123,0.8) 390px, rgba(179,252,69,0.8) 400px); background: -moz-repeating-linear-gradient(-100deg, rgba(57,247,231,0.3) 40px, rgba(194,43,159,0.3) 80px, rgba(225,36,103,0.3) 90px, rgba(253,29,54,0.3) 100px, rgba(152,141,116,0.3) 130px, rgba(51,252,177,0.3) 180px, rgba(115,252,123,0.3) 210px, rgba(179,252,69,0.3) 240px), -moz-repeating-linear-gradient(280deg, rgba(57,247,231,0.5) 30px, rgba(194,43,159,0.5) 80px, rgba(225,36,103,0.5) 90px, rgba(253,29,54,0.5) 100px, rgba(152,141,116,0.5) 110px, rgba(51,252,177,0.5) 180px, rgba(115,252,123,0.5) 210px, rgba(179,252,69,0.5) 240px), -moz-repeating-linear-gradient(75deg, rgba(57,247,231,0.8) 80px, rgba(194,43,159,0.8) 160px, rgba(225,36,103,0.8) 260px, rgba(253,29,54,0.8) 300px, rgba(152,141,116,0.8) 360px, rgba(51,252,177,0.8) 380px, rgba(115,252,123,0.8) 390px, rgba(179,252,69,0.8) 400px);

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

JSでユーザが使っているブラウザを判定する方法【userAgent】

JSでユーザが使っているブラウザを判定する方法【userAgent】

【PHP】foreachで配列の最初と最後を判定する

【PHP】foreachで配列の最初と最後を判定する

Visual Studio Codeの検索と置換

Visual Studio Codeの検索と置換

Local by Flywheelで本番環境のWordPressをローカルに複製する

Local by Flywheelで本番環境のWordPressをローカルに複製する

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

【完全禁止は難しい】Webサイトの画像保存を禁止させる方法

【完全禁止は難しい】Webサイトの画像保存を禁止させる方法