問題タブ [css-gradients]

2 つのグラデーションを作成したい。1 つは高さが 786 ピクセルで、次に高さが 100% のものが続きます。

これが私が試したことです：

下のものは効果がないようです。私が見逃しているものについての手がかりはありますか?

jsfiddle の作業: https://jsfiddle.net/8yqdfve2/5/

下の画像に示すように、デザイナーはこのタイプの背景を考え出しました。画像背景の使用は避けたいと思います。そのため、CSS の背景属性を使用してこれを再現できるかどうか、頭を悩ませようとしています。

最下層は単なる線形グラデーションで、問題はありません。しかし、その上に重ねられた円形はそれほど簡単ではありません (できれば)。

私が最初に考えたのは、円形の形状にさまざまな放射状グラデーションを使用することでしたが、ご覧のとおり、これらの形状には線形の塗りつぶしがあり、円がフェードアウトするように透明な背景が必要です。これを達成する方法はわかりませんが、私は CSS の専門家ではないので、これについて意見を聞きたいです。