Circular Gradients in CSS3

Problem

I'm looking to recreate a background like the one linked here using only css, I'm sure it's possible but I'm terrible at making CSS3 work for me.

If possible it should work in all modern browsers, not overly fussed about < IE8 support.

Any help is appreciated.

Problem courtesy of: pmck

Solution

This is the CSS to create a Circular Gradient.

Creating gradient using CSS3 is very easy now. As there are many tools available. Here are some online tools generate the gradiend code:

Colorzilla Gradients

Gradientoo

div{  
    width:250px;
    height: 250px;
     background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
    background-image: -o-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
    background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
    background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
    background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffeda3', endColorstr='#ffc800',GradientType=1 ); 
} 

Here is the Demo. http://jsbin.com/wedubinu/1/

Solution courtesy of: Kheema Pandey

Discussion

background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #1e5799 0%,#7db9e8 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

Generated by http://www.colorzilla.com/gradient-editor/

Discussion courtesy of: gaynorvader

This recipe can be found in it's original form on Stack Over Flow.