放射状(円形)グラデーション Radial gradient
放射状(円形)グラデーションについて
グラデーションはbackgroundまたはbackground-imageプロパティにradial-gradient
関数を設定します。
サイズ、形状、方向は省略でき、サイズはcover、形状はellipse、方向はcenter centerが初期値として設定されます。
構文
background:radial-gradient(サイズ 形状 at 方向, 開始色, 終了色);
旧Mozilla仕様:background:-moz-radial-gradient(方向, 形状・サイズ, 開始色, 終了色);
旧Webkit仕様:background:-webkit-radial-gradient(方向, 形状・サイズ, 開始色, 終了色);
またはbackground:-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), to(終了色));
形状 | |
---|---|
名称 | 設定値 |
circle | 正円 |
ellipse | 楕円(初期値) |
サイズ | |
---|---|
名称 | 設定値 |
closest-side (contain) | 要素の大きさの一番近い辺に合わせる |
closest-corner | 要素の大きさの一番近い角に合わせる |
farthest-side | 要素の大きさの一番遠い辺に合わせる |
farthest-corner (cover) | 要素の大きさの一番遠い角に合わせる(初期値) |
方向 | ||
---|---|---|
名称 | 設定値 | 設定値 旧Webkit仕様 |
中央(上下左右) | center center(初期値) | center center(初期値) |
左上→右下 | left top | left top |
上中央→下中央 | center top | center top |
右上→左下 | right top | right top |
左下→右上 | left bottom | left bottom |
下中央→上中央 | center bottom | center bottom |
右下→左上 | right bottom | right bottom |
サンプル
中央
左上→右下
上中央→
下中央
右上→左下
CSS
グラデーションポイントの追加
グラデーションの途中にポイントを追加して色を挿入することができます。
位置を省略した場合は、均等に配置されます(ただし、旧Webkit仕様でcolor-stopを使用している場合は、省略することができません)。
構文
background:radial-gradient(サイズ 形状 at 方向, 開始色, 途中色, 終了色);
旧Mozilla仕様:background:-moz-radial-gradient(方向, 形状・サイズ, 開始色, 途中色, 終了色);
旧Webkit仕様:background:-webkit-radial-gradient(方向, 形状・サイズ, 開始色, 途中色, 終了色);
またはbackground:-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, color-stop(開始位置, 開始色), color-stop(途中位置, 途中色), color-stop(終了位置, 終了色)));
サンプル
中央
左上→右下
上中央→
下中央
右上→左下
実行例
CSS