水面に雫が落ちて、波紋が広がるような背景 🌊
下記のスタイルを１つ追加するだけで手軽に実装が可能です。ヒーロー部分等で使用すれば、サイト全体をモダンな印象に引き締めてくれるでしょう。是非、コピー＆ペーストしてお試しください。

backgroundImage: 'linear-gradient(rgba(0,0,0,0.2) 0%, rgb(15,15,15) 80%), repeating-radial-gradient(circle at 50% 50%, rgb(45,45,45) 0, rgb(30,30,30) 32px)',

上記のように、linear-gradient（線形のグラデーション）とrepeating-radial-gradient（放射状のグラデーション）の2つを組み合わせている形です。

まずはlinear-gradientです 👇

backgroundImage: 'linear-gradient(rgba(0,0,0,0.2) 0%, rgb(80,80,255) 80%)',

黒rgba(0,0,0,0.2)から、青rgb(80,80,255)に向かって、上から80%の位置までグラデーションさせています。 （上から80% ~ 100%の範囲は、青rgb(80,80,255)で塗り潰されています）

次にrepeating-radial-gradientです 👇

backgroundImage: 'repeating-radial-gradient(circle at 50% 50%, rgb(80,80,255) 0px, rgba(40,40,123) 32px)',

円の基点をcircle at 50% 50%として要素の中央に指定しており、 明るい青rgb(80,80,255)から、暗い青rgba(40,40,123)に向かってグラデーションさせています。中央から32pxずつ円が繰り返し表示されている形です。

そして、この2枚を重ねると 👇

完成です。お好みで色やグラデーションの値を変更して、自分だけの波紋を作ってみてください！