Coder's Note

CSS3メモ 背景でのグラデーションの使い方

CSS3で背景にグラデーションの指定ができるようになりました。CSS3 Gradient Generatorというサイトもあるのですが、いちいちブラウザを開いて入力するのも面倒です。覚えてしまえれば一番簡単なのですが、指定する値がブラウザによって違うのでメモしておきます。

対応ブラウザ

CSS3のグラデーションは線形（linear）と放射状（radial）の２種類があります（放射状のグラデーションはFirefoxだけっぽいです）。両方とも対応しているのは以下の3つです（2010年5月16日現在）。

  • Firefox
  • Safari
  • Chrome

線形のグラデーション

黄金比グラデーション・白銀比グラデーションを参考に黄金比率のグラデーションを作ってみました（38%と62%で分割しました）。グラデーションの色の指定にはRGBaが使えます。RGBaで透過のグラデーションをいくつか作っておくと背景色を変えるだけで雰囲気を変えることができるので便利です。

デモ

線形グラデーション

Webkit

/* Webkit */
background-image: -webkit-gradient(
    linear,                                  /* (1) */
    0 0, 0 100%,                             /* (2) */
    from(rgba(255,255,255,0.2)),             /* (3) */
    color-stop(0.38, rgba(255,255,255,0.3)), /* (4) */
    color-stop(0.38, rgba(255,255,255,0)),   /* (4) */
    to(rgba(255,255,255,0.4))                /* (5) */
);
(1) 線形の指定
linearを指定すると線形のグラデーションになります。
(2) 開始位置・終了位置
グラデーションの開始位置と終了位置の指定です。left top, left bottomと書くこともできます。
(3) 開始色
グラデーションが始まる色を指定します。RGBa以外にも16進数のRGBでの指定や、transparentなどの色の名前での指定もできます。
(4) 間の色
グラデーションの中で色を変えたいときに指定します。指定は位置, 色になります。位置は0〜1の間の数値で指定します。ここには好きなだけ色を追加することもできます。もちろん必要なければ書かなくても問題ないです。
(5) 終了色
グラデーションの終わりの色です。

Firefox

background-image: -moz-linear-gradient(
    top,                       /* (2) */
    rgba(255,255,255,0.2) 0,   /* (3) */
    rgba(255,255,255,0.3) 38%, /* (4) */
    rgba(255,255,255,0) 38%,   /* (4) */
    rgba(255,255,255,0.4) 100% /* (5) */
);

Webkitとは違い、線形の指定は-moz-linear-gradientとして指定します。

(2) 開始位置・終了位置
グラデーションの開始位置と終了位置の指定です。left topと書くこともできます。
(3) 開始色
グラデーションが始まる色を指定します。RGBa以外にも16進数のRGBでの指定や、transparentなどの色の名前での指定もできます。
(4) 間の色
グラデーションの中で色を変えたいときに指定します。Webkitとは違い色 位置と指定します。
(5) 終了色
グラデーションの終わりの色です。

放射状のグラデーション

radialを指定すると放射状のグラデーションも作ることができます。Firefoxでないときれいに表示されないのでFiredfoxで確認してみてください。

デモ

background-image:
    -moz-radial-gradient(
    70% 20%, /* 中心の位置 */
    rgba(255,255,255, 0.5) 0,
    rgba(255,255,255,0.3) 38%,
    rgba(0,0,0,0.4) 100%
);