対応ブラウザ

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

数値的には全体の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で指定する方法を使いましょう。

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は右から左というように時計回りでスタート位置が変わっていきます。

CSS
コピー
background: linear-gradient(60deg, red, yellow);
background: -webkit-linear-gradient(30deg, red, yellow);
background: -moz-linear-gradient(30deg, red, yellow);

ベンダープレフィックス付きの場合は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));

３色以上を指定する

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

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%);

基本

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);

基本

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

基本

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

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

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);