background:linear-gradient	「上下左右」に向かって変化する「グラデーション」を指定する
background:radial-gradient	「円形」の「グラデーション」を指定する

詳しくは、
下記をご参照ください。

INDEX

■ 「background:linear-gradient」を使用して「上下左右」に「グラデーション」する方法
■ 「background:radial-gradient」を使用して「円形」に「グラデーション」する方法

■ Gallery

「background:linear-gradient」を使用して「上下左右」に「グラデーション」する方法

「background:linear-gradient」は、
「背景」に、
「上下左右」に変化する
「グラデーション」「透明度」を指定することができる。

「background:linear-gradient」の「書式」

background:linear-gradient( 向き, 「色・位置指定」, 「色・位置指定」,・・・・・「色・位置指定」);

background:linear-gradient(
グラデーションの向き,
「色・位置指定」（スタート地点）,
「色・位置指定」中間地点,
「色・位置指定」中間地点,
・
・
・
「色・位置指定」終了地点
);

書式サンプル

background: linear-gradient( 45deg, red 0%, yellow 50%, green 100%);
background: linear-gradient( 45deg, #e66465, #9198e5);
background: linear-gradient( 0.25deg, #3f87a6, #ebf8e1, #f69d3c);
background: linear-gradient( to left, #333, #eee 50%, #333 100%);
background: linear-gradient( 217deg, rgba(255,0,0,.8) 10%, rgba(0,0,255,0) 90%);

「グラデーションの向き」の指定方法

値	説明
to top	下から上に向かうグラデーション。角度指定「0deg」と同じ。
to bottom	上から下へと向かうグラデーション。角度指定「180deg」と同じ。
to left	右から左へと向かうグラデーション。角度指定「270deg」と同じ。
to right	左から右へと向かうグラデーション。角度指定「90deg」と同じ。
角度指定	「角度指定」は、単位「deg」で指定する。日本で言えば「90度」の「度」の単位と同じ。「0deg」〜「360deg」の数値で指定する。「turn」という単位でも可能。

「スタート地点」「中間地点」「終了地点」の「色」と「位置」を指定する書式

値	説明
色指定コード位置指定色指定コード 0% rgba(R,G,B,Alpha)　10%	色コードは、・gba(R,G,B) ・rgba(R,G,B,Alpha) ・#RRGGBB などの形式で色指定が可能。「位置指定」は、「%（パーセンテージ）」での指定が可能。指定した位置からグラデーションが開始される。その位置までは指定した色の単一色。

Back

「background:radial-gradient」を使用して「円形」に「グラデーション」する方法

「background:radial-gradient」は、
指定したオブジェクトの背景に、
「円形のグラデーションカラー」を指定することができる。

円形グラデーション「background:radial-gradient」の指定方法

「radial-gradient」は、
「中心点」を最初に指定し、その後に、
最初の色と位置、
変化する色と位置、
最終的な色と位置
を指定する。
少なくとも、
最初と最後の「2色」の色指定が必要。

円形グラデーションの書式

background:radial-gradient(中心点の位置, 色指定　位置, 色指定　位置,・・・・・・色指定　位置)；

グラデーションの開始位置と終了位置を指定してサイズ調整する書式

「色指定コード」の後ろを「半角スペース」で区切り、
「%（パーセント）」指定することで、
その位置から、前後の「色指定」コードまでのグラデーションを作成するようになっている。
指定した位置が、
指定した色になり、そこからグラデーションが始まる。
最初と最後の色で、位置指定すると、
最初の色であれば、その位置まで、最初の色のべた塗りとなり、
最後の色であれば、最後まで、最後の色でべた塗りされる。

background: radial-gradient(circle at 50% 50%, red, yellow 50%);
background: radial-gradient(circle at 50% 50%, red 10％, yellow 50%);
background: radial-gradient(circle at 50% 50%, red 50％, yellow 90%);
background: radial-gradient(circle at 50% 50%, red 50％, yellow);

中心から円形グラデーションを指定する書式

「中心」を指定する方法がわかると、
中心点をずらすことも出来るようになる。

background: radial-gradient(circle at 50% 50%, rgba(0, 232, 248, 0.7) 0%,rgba(210, 210, 211, 0.7) 100%);
background:radial-gradient(circle at center, red 0, blue 50%, green 100%)；

中央から外れた場所からの円形グラデーションを指定する書式

中心点をずらす方法は、いくつかあるので、
覚えておくと便利。
解析も出来るようになる。

background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%);
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

グラデーションを組み合わせる書式

複数のグラデーションを組み合わせることも可能。

background: radial-gradient(ellipse at top, #e66465, transparent), radial-gradient(ellipse at bottom, #4d9f0c, transparent); background-image:　radial-gradient( circle at 120% 75%, lime, transparent 60% ), radial-gradient( circle at 20% 30%, transparent, red );

「radial-gradient」で使用される「オプション」

オプション	説明
色指定コード	色コードは、・gba(R,G,B) ・rgba(R,G,B,Alpha) ・#RRGGBB などの形式で色指定が可能。


center	「中心点」の位置を「真ん中」にする
top	「中心点」の位置を「上」にする
left	「中心点」の位置を「左」にする
right	「中心点」の位置を「右」にする
bottom	「中心点」の位置を「下」にする


closest-side	グラデーションは、・「circle」の場合、ボックスの中心から最も近い辺に内接する。・「ellipse」の場合、中心から最も近い縦の辺と横の辺に内接する。
closest-corner	グラデーションは、ボックスの「中心から最も近い頂点」に接するように「サイズ調整」される。位置指定する書式 : 「closest-corner at 30% 30%」。
farthest-side	グラデーションは、その中心から最も遠い辺 (または縦と横の辺) に接するようにサイズ調整される。
farthest-corner	既定値。グラデーションは、ボックスの中心から最も遠い頂点に接するようにサイズ調整される。


circle	グラデーションの形状が、「半径が一定の円」。位置を指定する書式 : 「circle at 20% 30%」
ellipse	「軸」に沿った「楕円」。指定がなかった場合は、既定値は「ellipse」。

Back