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

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

CSSのlinear-gradient()関数を使うと、要素の背景画像として線形グラデーションを簡単に設定できます。複数の色を指定するだけで、それらが滑らかにつながったグラデーションが自動的に生成されるため、画像ファイルを用意する必要がありません。

linear-gradient()の基本構文

background: linear-gradient(方向または角度, 色1, 色2, ...);

色は2つ以上指定でき、指定した順番に沿ってグラデーションが描画されます。

使用例

以下のコードでは、緑（green）・オレンジ（orange）・栗色（maroon）の3色を使った線形グラデーションを背景に設定しています。実際にコードを実行して、表示結果を確認してみてください。

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

グラデーションの方向を指定する

第1引数に「to right」「to bottom」などのキーワードや、角度（例：45deg）を指定すると、グラデーションの向きを自由に変更できます。

background: linear-gradient(to right, green, orange);

このようにlinear-gradient()関数を活用すれば、CSSだけで美しいグラデーション背景を作成でき、ページのデザイン性を手軽に高めることができます。

  1. CSSのlinear-gradient()関数とは？線形グラデーションの使い方を実例で解説

    linear-gradient() 関数は、CSSで線形グラデーション（直線状に色が変化するグラデーション）を定義し、背景画像として設定するために使用されます。単一の色ではなく、複数の色を滑らかにつなげた美しい背景を簡単に作成できるため、Webデザインにおいて非常に人気のある機能です。基本構文background-image: linear-gradient(方向, カラーストップ1, カラーストップ2, ...);第1引数にはグラデーションの開始点や方向（例：to bottom right や to right）を指定し、続けてカラーストップ（色の切り替えポイント）を任意の数だけ指定します。

  2. CSS背景プロパティとは？基本構文と実用的なサンプルコードで解説

    CSSの背景プロパティは、要素の背景をスタイリングするために使用される重要な機能です。backgroundプロパティは、要素の背景をまとめて指定できるショートハンド（一括指定）プロパティであり、以下の8つの個別プロパティで構成されています。 背景関連の8つのプロパティ background-color：要素の背景色を指定します。 background-image：背景画像を指定します。 background-repeat：背景画像の繰り返し方法を指定します。 background-position：背景画像の表示位置を指定します。 background-clip：背景の描画範囲を指定します。