@ CSS

radial-gradient() メソッド

CSS3では線形グラデーションの他に radial-gradient() メソッドを使って、1点から放射線状に広がる円形のグラデーションを描画することができます。

format

radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);

形状として選べるのは circle か ellipse のみです。

サイズは、以下のキーワードで指定します。
キーワード 説明
closest-side ボックスの一番近い辺に合わせる
closest-corner ボックスの一番近い角に合わせる
farthest-side ボックスの一番遠い辺に合わせる
farthest-corner ボックスの一番遠い角に合わせる

radial_gradient

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.gradient {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(ellipse closest-side at 100px 100px , #FFFF00 0%, rgba(0, 0, 0, 0) 50%, #000000 75%);
}
</style>
</head>

<body>
  <div class="gradient"></div>
</body>

</html>

demo