CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。

radial-gradient()の基本構文

background: radial-gradient(色1, 色2, 色3, ...);

色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。

実装例

次のコードでは、緑（green）・オレンジ（orange）・栗色（maroon）の3色を使った放射状グラデーションを、div要素の背景に適用しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            height: 200px;
            background: radial-gradient(green, orange, maroon);
         }
      </style>
   </head>
   <body>
      <p>背景に放射状グラデーションを設定した例です。</p>
      <div id = "demo"></div>
   </body>
</html>

表示結果

このコードを実行すると、高さ200pxの要素の中央から外側へ向かって、「緑 → オレンジ → 栗色」と変化する円形のグラデーションが表示されます。

応用：形状や中心位置の指定

radial-gradient()では、グラデーションの形状（circle＝正円、ellipse＝楕円）や中心位置も細かく制御できます。

/* 正円のグラデーション */
background: radial-gradient(circle at center, green, orange, maroon);

/* 左上を中心とした楕円のグラデーション */
background: radial-gradient(ellipse at top left, green, orange, maroon);

このように形状や位置を組み合わせることで、より表現力豊かな背景デザインを実現できます。モダンブラウザであればベンダープレフィックスなしで利用可能です。

  1. CSSで画像の上にボタンを配置する方法

    Web制作では、画像の上にボタンを重ねて表示したい場面がよくあります。たとえば、バナー画像の中央に「詳しく見る」ボタンを置いたり、サムネイル画像に再生ボタンを重ねたりするケースです。CSSのpositionプロパティを使えば、簡単に実現できます。 画像の上にボタンを重ねる基本の仕組み 画像の上にボタンを配置するには、次の2つの指定がポイントになります。 画像を包む親要素（コンテナ）にposition: relative;を指定する ボタンにposition: absolute;を指定し、親要素を基準とした位置を決める さらにtop: 50%・left: 50%とtransform: tr

  2. CSSのlinear-gradient()関数で背景に線形グラデーションを設定する方法

    CSSでは、linear-gradient()関数を使うことで、背景画像として線形グラデーションを簡単に設定できます。この関数はbackgroundプロパティやbackground-imageプロパティの値として指定し、複数の色をカンマで区切って渡すことで、それらが滑らかにつながったグラデーションが生成されます。 linear-gradient()関数の基本構文 background: linear-gradient(色1, 色2, 色3, ...); 色は2つ以上指定でき、上から下へ順番に表示されます。グラデーションの方向（角度）を指定することも可能です。例えばlinear-gradient