「領域の角から始まる円形の CSS グラデーションを付けたい」と思った時のメモです。
まずはじめに、以下のジェネレーターなどで CSS グラデーションを生成します。
CSS Gradient — Generator, Maker, and Background
以下のような記述で、円形グラデーションの座標を指定することができます。
.sample {
background-image: radial-gradient( circle at 40% 20%, red 10%, yellow 15% );
}circle- 指定すると、グラデーションは正円となります
- 指定しないと、グラデーションは領域の大きさに合わせた楕円形となります
at- 円の中心の座標を指定できます
at 横方向 縦方向で指定
調整がなかなか難しい部分もあるのですが、下記のサイトが非常に参考になりました。
radial-gradient() : 円形グラデーション - CSSの設定値 - Web開発 - fromkato.com