csscss-gradients

Smooth CSS gradients

I'm learning how to use CSS gradients.

My problem is with top to bottom gradients. You can just see the "stops" in the color changing.

enter image description here

This is my CSS code

#header { 
   width:1000px; 
   height:250px; 
   background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
   background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
}

Is there a way to smooth out the stops in top to bottom gradients? (this, to my eye, isn't very visible in left to right or right to left gradients)

Solution

  • Think's below css will suite your need.

    CSS :

    #header {
    width:1000px;
    height:250px;
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Opera */ 
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37));
    /* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%);
}

    http://jsfiddle.net/xPLPH/

    Learn more about Linear Gradients: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient