Title

radial-gradientとは

radial-gradient とは次の語句からなるCSSの関数です。

radial

読み: ラジアル
意味: 放射状、半径方向

gradient

読み: グラディエント
意味: 傾斜、勾配

目次に戻る

radial-gradient関数の概要

この関数は放射状のグラデーション画像を生成するために使用します。

グラデーションのタイプは命名どおり、指定した開始色から終了色までの指定方向と距離に応じた放射状、かつ滑らかなグラデーションを表現します。

グラデーションの中心の位置を(at 水平方向の位置 垂直方向);の位置のかたちで半角スペースで区切って指定します。 この水平方向と垂直方向の位置は background-position プロパティと同じ指定方法を使い、 単位付きの実数値やパーセンテージ値、またはtop、bottom、center、left、rightのキーワード値の組み合わせで指定します。 開始位置を省略すると自動的にcenterになります。

放射状のグラデーションでは、色の指定は円の中心から左右方向に伸びるグラデーションレイの上に配置されます。 この色の値と位置を半角スペースで区切り指定します。 位置を指定する場合は単位付きの実数値かパーセンテージ値で指定します。

radial-gradient関数は主に、 background-imageプロパティや backgroundプロパティに使用します。

仕様上は画像を扱える全てのプロパティにグラデーション画像を定義できることになっていますが、 ブラウザによって対応が異なっているので、使用する際には配慮が必要だと思われます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この関数の記述は以下のような書き方になります。

セレクター{
	image型プロパティ: radial-gradient(形状 at ポジション, 開始色 0, 経由色, 終了色 100%);
}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

検証に使う要素はdiv要素とします。また使用するプロパティは、 background-image です。 これは、背景の総合プロパティである background プロパティを使って画像を指定することと、何ら変わりません。

色の指定: 開始色と終了色

この関数ではグラデーションを作成するために最低でも開始色と終了色を指定する必要があります。 ここでは単純な例として開始色が赤色、終了色が黄色の円形グラデーションを作ってみます。

div{background-image: radial-gradient(red, yellow);}

目次に戻る

色の指定: 開始色と経由色と終了色

開始色と終了色の間に経由色を複数、設定することができます。 ここでは赤色、黄色、銀色を指定していますが、黄色が経由色となります。

div{background-image: radial-gradient(red, yellow, silver);}

目次に戻る

形状と開始点: ellipse at center

この関数ではグラデーションの形状と開始点を設定することができます。 ここで使用しているキーワード値はどちらも初期値となります。

コード記述: 形状 at 開始点

• ellipse: 要素の形状に合わせた楕円を描きます。
• center: 要素の中心を開始点とします。

div{
	background-image: radial-gradient(ellipse at center, red, yellow, silver);
}

目次に戻る

形状: circle

グラデーションの形状にcircleキーワードを指定すると要素の形状に関係なく 円を描きます。

コード記述: 形状 at 開始点

div{
	background-image: radial-gradient(circle at center, red, yellow, silver);
}

目次に戻る

開始点: ポジションの指定

グラデーションの開始点を指定する場合は、 background-position プロパティと同じ指定方法でおこなうことになり、 キーワード値・数値・パーセンテージ値の組み合わせとなります。

div{
	background-image: radial-gradient(circle at 開始点, red, yellow, silver);
}

目次に戻る

変色点: 変色点の指定

ここではグラデーションに使う色の切り替え点を指定しています。 指定方法は各色の後に半角スペースを入れて単位付き数値かパーセンテージ値で指定します。

例えば最初のサンプルで説明すると、赤色が0(原点)であり、50%の位置まで滑らかにグラデーションを描き50%の位置で完全な黄色になります。 その後、50%の位置から100%の位置まで黄色から銀色にグラデーションを描き100%の位置で完全な銀色となります。

div{
	background-image: radial-gradient(red 0, yellow 50%, silver 100%);
}

目次に戻る

応用: 複数のグラデーションを組み合わせる

ここではbackground-imageプロパティに二つのradial-gradient関数を使用しています。 一つ目の関数では開始点をtopに設定して、二つ目の関数では開始点をbottomに設定して上下にグラデーションの開始点を割り振っています。 また、グラデーションの終了色にはtransparentを指定して透明にしています。このtransparentによって二つのグラデーションは終了点に 近づくほど、互いに透過しあい混合色となっていきます。

div{
	background-image: 	radial-gradient(circle at top, red, transparent), 
						radial-gradient(circle at bottom, blue, transparent)
	;
}

目次に戻る

補足説明

• 画像を扱えるプロパティに使用可能

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

background-image: radial-gradient(red, yellow);

background-image: radial-gradient(red, yellow, silver);

background-image: radial-gradient(ellipse at center, red, yellow, silver);

background-image: radial-gradient(circle at center, red, yellow, silver);

background-image: radial-gradient(circle at top, red, yellow, silver);

background-image: radial-gradient(circle at bottom, red, yellow, silver);

background-image: radial-gradient(circle at left, red, yellow, silver);

background-image: radial-gradient(circle at right, red, yellow, silver);

background-image: radial-gradient(red 0, yellow 40%, silver 80%);

background-image: radial-gradient(red 0, yellow 30%, silver 60%);

background-image: radial-gradient(red 50%, yellow 100%);

目次に戻る