Wie kann ich diesen unregelmäßigen Verlauf mit CSS erzeugen?

Wenn Sie auch ein Bild verwenden können, lesen Sie meine Antwort hier (Sie müssten den Unschärfewert um einiges erhöhen).

Wenn Sie möchten, dass dies nur mit CSS erfolgt (z. B. mit CSS3-Farbverläufen ), ist dies möglicherweise nicht so einfach, je nachdem, wie genau Sie das replizieren möchten. Sie könnten etwas ziemlich Nahes mit viel Optimierung schaffen. Sie können die hier erläuterte Methode verwenden, um sowohl einen radialen als auch einen linearen Verlaufsstil anzuwenden.

Ich habe den folgenden Stil zusammengestellt, um zu zeigen, was Sie tun können:

.gr1 {
    width: 100%;
    height: 500px;
    background: linear-gradient(to bottom, #494f2f 0%, #a3772e 22%, #835019 62%, #5e3a11 100%, #5e3a11 100%), radial-gradient(ellipse at center, #494f2f 0%, #a3772e 22%, #835019 62%, #5e3a11 100%, #5e3a11 100%);
}
.gr1:after {
    content :' ';
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(238, 241, 100, 0.45) 0%, rgba(83, 89, 54, 0.01) 94%, rgba(73, 79, 47, 0.01) 100%);
}

In Chrome ergibt das für mich Folgendes:

Hier ist ein JSFiddle . Es ähnelt nur geringfügig dem Bild, das Sie gepostet haben, aber ich überlasse es Ihnen, die Farbe zu optimieren, um die gewünschten Ergebnisse zu erzielen.

Hier ist ein weiterer Versuch (siehe Codepen ):

HTML

<div></div>

CSS

body, div {
  height:100%;
  width:100%;
  margin:0;
  position:absolute;
}

div {
    background: radial-gradient(ellipse at center bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse at center top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}

Dies erzeugt (auf Chrome):