グラデーションがあるトップページを作りたい

Question

グラデーションがあるトップページを作りたいと思っております。
イメージ図としては、こんな感じです。

グラデーション部分はジェネレーターがあるとはいえ、今回作りたいグラデーションの中心が真ん中ではなく左寄りにあるため、コードを生成できるジェネレーターを見つけられていません。そのようなジェネレーターはありますでしょうか。

そのようなジェネレーターがない場合、
・円形のグラデーション
・グラデーションの中心部分を調整する
のはどうすればできるのでしょうか。

また、全ページグラデーション背景にしたいわけじゃないので、高さ指定もしたいのですが、どのようにすればできるのでしょうか。

よろしくお願いします。

Answer 1

左寄りもそれほど難しくないので書いてみればどうでしょうか？

  background: radial-gradient(circle at 30% 50%, #9cf, #fff) 0% 0%/100% 200px no-repeat;

https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient#Non-centered_gradient
https://developer.mozilla.org/ja/docs/Web/CSS/background-size

ジェネレーターでも左寄りにできるようです("Shape in Box"のところ)。
https://shapy.app/

Comments

[AmiI]

ありがとうございます、グラデーションの色合いは完成しました！

Answer 2

こちらに様々な種類のグラデーションの書き方が載っています。
かなり、読みやすいので一読の価値ありです。