Multiple Gradients in CSS

Recently, a Redditor asked whether it was possible to create a background that looked like this UI mockup by Mike from Creative Mints.

In fact, it's quite easy to do so using multiple background images in CSS. The following solution requires no images, though it does require a browser to support multiple background images and radial CSS gradients.

div.gradient{  
  width: 100%;
  height: 100%;
background: #FFF;

background-image:

-webkit-radial-gradient(80% 10%, circle, #BF7667, transparent),

-webkit-radial-gradient(80% 50%, circle, #EFDDB7, transparent),

-webkit-radial-gradient(20% 80%, 40em 40em, #977351, transparent),

-webkit-radial-gradient(10% 10%, circle, #E1C3B9, transparent);

}

The above code does not include vendor prefixes for browsers other than WebKit, though it is trivial to do so.

Essentially, all we do is create several radial gradients that fade from each specified color to transparent. Together, they all blend together to form what looks like the result of using a gaussian blur on a photograph.