Hasan Setiawan

CSS linear gradient from center

Linear gradients are easy to create in CSS and are extremely useful. As we'll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway!

Here's an example that shows how harsh a standard linear-gradient() can be compared to how smooth we can make it by easing it:

      
      // here is the css
      div {
        height: 400px;
        width: 400px;
        background: #eded2f; /* Old browsers */
        background: -moz-radial-gradient(center, ellipse cover,  #eded2f 0%, #474919 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eded2f), color-stop(100%,#474919)); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover,  #eded2f 0%,#474919 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover,  #eded2f 0%,#474919 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover,  #eded2f 0%,#474919 100%); /* IE10+ */
        background: radial-gradient(ellipse at center,  #eded2f 0%,#474919 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eded2f', endColorstr='#474919',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
      }


      // and here is html