Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I am looking for a way to reproduce this gradient using css:

enter image description here

Is it possible? I don't know how the png gradient has been done.

share|improve this question

1 Answer 1

up vote 5 down vote accepted

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:

gradient

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.

share|improve this answer
    
Yes, I think you would need multiple layers and linear and circular gradients. It will be rather fiddly, but it can be done. –  Random O'Reilly Feb 10 at 23:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.