CSSで円形グラデーションを簡単に作成！radial-gradientの解説とサンプルコード

基本構文

background: radial-gradient(
  [形状] [開始位置] [開始色],
  [中間色1] [中間位置1],
  [中間色2] [中間位置2],
  ...
  [終了色] [終了位置]
);

この関数は、以下の引数を取ります。

終了色: グラデーションの終了点の色を指定します。
中間色: グラデーションの途中経過点を、色と位置をペアで指定します。複数個設定できます。
開始色: グラデーションの開始点の色を指定します。
開始位置: グラデーションの開始点の位置を、要素のサイズに対する割合で指定します。省略すると、中心位置になります。
形状: グラデーションの形状を指定します。省略すると、正円になります。
- circle: 正円
- ellipse: 楕円形

グラデーションの表現

radial-gradient 関数は、以下の要素を使ってグラデーションを表現します。

位置: グラデーションにおける各色の位置を、要素のサイズに対する割合で指定します。0% は開始点、100% は終了点となります。中間色は、0% と 100% の間で任意の位置に設定できます。
色: red, green, blue などの基本的な色名、#FF0000 などの16進数表記、rgb(255, 0, 0) などのRGB表記などが使用できます。

以下の例は、中心から白(#ffffff)から青(#0000ff)へのグラデーションを作成します。

background: radial-gradient(#ffffff 0%, #0000ff 100%);

以下の例は、楕円形のグラデーションを作成し、中心から青(#0000ff)から緑(#00ff00)を経て、赤(#ff0000)へと変化するグラデーションを作成します。

background: radial-gradient(ellipse 50% 0% at 25% 50%,
  #0000ff 0%,
  #00ff00 50%,
  #ff0000 100%);

グラデーションの方向やサイズを変更するには、gradient-direction や gradient-size などのプロパティを使用できます。
repeating-radial-gradient 関数は、グラデーションを繰り返しパターンとして要素内に表示します。

基本的なグラデーション

.element {
  background: radial-gradient(#ffffff 0%, #0000ff 100%);
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 円形にするために要素に丸みを付ける */
}

楕円形のグラデーション

この例では、楕円形のグラデーションを作成し、中心から青(#0000ff)から緑(#00ff00)を経て、赤(#ff0000)へと変化します。

.element {
  background: radial-gradient(ellipse 50% 0% at 25% 50%,
                             #0000ff 0%,
                             #00ff00 50%,
                             #ff0000 100%);
  width: 150px;
  height: 100px;
}

繰り返しグラデーション

この例では、中心から青(#0000ff)をベースに、白(#ffffff)が繰り返し現れるようなグラデーションを作成します。

.element {
  background: repeating-radial-gradient(circle, #0000ff 0%, #ffffff 50%);
  width: 100px;
  height: 100px;
}

グラデーションの方向とサイズ

この例では、中心から45度方向に広がる、サイズが要素の2倍のグラデーションを作成します。

.element {
  background: radial-gradient(45deg, #0000ff 0%, #ffffff 100%) local;
  width: 100px;
  height: 100px;
}

この例では、3つの色を使ったグラデーションを作成し、それぞれの色がグラデーションにおける特定の位置に出現するように設定します。

.element {
  background: radial-gradient(#ff0000 0%, #00ff00 50%, #0000ff 100%);
  width: 100px;
  height: 100px;
}

グラデーションの位置は、百分率以外にも、px や rem などの単位で指定することもできます。
グラデーションの色の数は、自由に設定できます。
上記の例はほんの一例です。radial-gradient 関数は、様々なパラメータを組み合わせて、自由な表現が可能です。

以下に、radial-gradient 関数の代替方法をいくつか紹介します。

SVG グラデーション

SVG (Scalable Vector Graphics) を使用して、円形グラデーションを定義することができます。SVG はベクター画像フォーマットなので、解像度に依存せずに滑らかなグラデーション表現が可能です。

<svg width="100" height="100">
  <defs>
    <radialGradient id="myGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#0000ff" />
    </radialGradient>
  </defs>
  <circle cx="50%" cy="50%" r="50%" fill="url(#myGradient)" />
</svg>

この例では、中心から白 (#ffffff) から青 (#0000ff) への円形グラデーションを作成しています。

filter プロパティと canvas 要素

filter プロパティと canvas 要素を組み合わせて、疑似的な円形グラデーションを作成することができます。この方法は、SVG よりも柔軟性がありますが、処理速度が遅くなる可能性があります。

.element {
  width: 100px;
  height: 100px;
  background: #ffffff;
  filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4gPGNpcmNsZSBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCUiIGZpbGw9InVybCgjZGVmcyMybHlDb2xvciIpIi8+IDwvZW5zdmcvPg==);
}

radial-gradient 関数の代替機能を提供する JavaScript ライブラリがいくつか存在します。これらのライブラリを使用すると、古いブラウザでも、より簡単に円形グラデーションを作成することができます。

これらのライブラリは、それぞれ異なる機能と利点を持っているので、プロジェクトに合わせて最適なものを選ぶ必要があります。

注意事項

上記で紹介した代替方法は、それぞれ一長一短があります。

ライブラリは、使いやすく便利ですが、ライブラリ自体の読み込みが必要になります。
filter プロパティと canvas 要素は、柔軟性がありますが、処理速度が遅くなる可能性があります。
SVG グラデーションは、最も汎用的で高品質な方法ですが、コードが煩雑になる可能性があります。

どの方法を選択するかは、プロジェクトの要件や制約によって異なります。