: How can I produce this irregular gradient using css? I am looking for a way to reproduce this gradient using css: Is it possible? I don't know how the png gradient has been done.

@Michele215

If you're OK with using an image too, see my answer here (you'd have to increase the blur value by quite a bit).

If you want it do be done purely with CSS (e.g. with CSS3 gradients), that might not be easily done depending on how exact you want to replicate that. You could create something pretty close with a lot of tweaking. You can use the method explained here to apply both a radial and linear gradient style.

I put the following style together to show what you could do:

.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%);
}


On Chrome, that produces the following for me:



Here's a JSFiddle. It only slightly resembles the image you have posted, but I'll leave the color tweaking up to you to get the results you're after.

Vote Up Vote Down