Smooth CSS gradients

Question

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.

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)

Answer 1

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

Answer 2

This is my favorite tool for making gradients. I especially love that it outputs SASS/SCSS syntax.

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