how to make a css gradient stop after so many pixels?

Nils_e picture Nils_e · Jan 14, 2012 · Viewed 15.9k times · Source
-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;

I have this code above and i just realized that this gradient goes from top to bottom. Is there any way to make it stop the whole gradient after 30px. I can make adjustments as necessary, but how do you get the gradients to complete itself after 30px?

Answer

doyoe picture doyoe · Jan 14, 2012

You can use the background-size property together.

like this:


    
    div {
        height:100px;
        background:-moz-radial-gradient(center, ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
        background-size:auto 30px;
    }