2

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.

5

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.

| 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. – benteh Feb 10 '14 at 23:34
0

Here's another try at it (see 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%);
}

This produces (on Chrome):

Gold color

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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