今回はCSSを使って背景にグラデーションを指定する方法を紹介します。
主に指定するプロパティは background-image で、グラデーション用として用意された関数は線形グラデーション用の linear-gradient()と円形グラデーション用のradial-gradient()です。
古い環境向けでは書式の違うベンダープレフィックスが必要になりますが、最新のブラウザであればベンダープレフィックスは不要です。
線形グラデーション
linear-gradient([開始位置] [角度], 開始色, [途中色], 終了色)
開始位置、角度、途中色は省略可能で、デフォルトの開始位置はtop、角度は0deg、途中色は指定なしとして扱われます。
必要最低限の指定をしたサンプルは下記になります。
background-image: linear-gradient(#F15F79, #B24592);
結果
角度を変更
開始位置や角度を指定してグラデーションの方向を定義することができます。
グラデーションを左から右へ走るように変更するには to left という値で角度を指定できます。
background-image: linear-gradient(to left, #F15F79, #B24592);
結果
to left という指定は右から左にグラデーションさせるので、開始色は右側になります。
ベンダープレフィックスを付ける場合は to left ではなく left という表記になり、この場合は開始色が左になります。to left と同じ結果にするには、right を指定します。
background-image: -webkit-linear-gradient(right, #F15F79, #B24592);
上記は開始位置を左として指定していますが、角度を指定することもできます。マイナス値も使えます。
background-image: linear-gradient(270deg, #F15F79, #B24592);
0度は下から上へのグラデーションとなり、90度は左から右へのグラデーションになります。
ベンダープレフィックスをつける場合は時計回りではなく反時計回りになるので、ベンダープレフィックスをつける場合は下記になります。
background-image: -webkit-linear-gradient(180deg, #F15F79, #B24592);
各色の開始位置を指定
開始色や終了色の開始位置を割合（%）または数値（0～1.0）で指定できます。
下記の例では終了色を30%の位置からグラデーションさせています。
background-image: linear-gradient(#F15F79, #B24592 30%);
ピクセル指定の場合は下記のとおりです。
background-image: linear-gradient(#F15F79 100px, #B24592);
開始位置を指定しない場合はデフォルトで等間隔にグラデーションされます。
色を追加
開始色と終了色の中間に複数の色を追加することができます。
background-image: linear-gradient(#F15F79, #ffffff, #B24592);
透過
グラデーションは rgba() を使って透明度（0～1.0）も設定できます。
background: linear-gradient(rgba(246, 255, 0, 0.5), rgba(255, 0, 161, 0.5));
CSS3では background プロパティーの値をカンマで区切ることで、複数の背景を設定できます。
その際、先に指定したものが最上部に表示されていきます。
これを利用して、背景画像の上に透過したグラデーションをオーバーさせることができます。
background: linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(bg.jpg);
円形グラデーション
円形のグラデーションを実装するには radial-gradient を使います。
background-image: radial-gradient(#F15F79, #B24592);
ベンダープレフィックス
ブラウザのバージョンによってはベンダープレフィックスを付けないとグラデーションが効かない場合があるので、対応バージョンを増やしたい場合はベンダープレフィックスを付けてください。
| ブラウザ名 | ベンダープレフィックスが必要なバージョン | リリース年 |
|---|---|---|
| Chrome | 25以下 | 2013年 |
| Safari | 6以下 | 2012年 |
| Firefox | 16以下 | 2012年 |
| Android | 5.0以下 | 2014年 |
| iOS | 6.1以下 | 2013年 |
ベンダープレフィックス一覧
- -moz-linear-gradient
- 古いFirefox用のベンダープレフィックスのため、ここでは省略します。
- -webkit-gradient
- 古いWebkit系のブラウザ、Android 2.1-3等の古い環境に対応するなら必要。ここでは省略します。
- -webkit-linear-gradient
- -webkit-gradientの後のベンダープレフィックスで、2014年あたりのandroidに対応するなら必要。ここでは指定します。
- -o-linear-gradient
- 古い Opera 用のベンダープレフィックスのため、ここでは省略します。
- -ms-linear-gradient
- 古い IE 用のベンダープレフィックスで、IE10以降で linear-gradient がサポートされています。ここでは省略します。