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

html css radial-gradients
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;
    }

Related questions

Make <body> fill entire screen?

I'm using a radial gradient as the background on my webpage, like so: background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000)); It works, but when the content does not fill the whole page the gradient is cut off. How can I make …

Read More
How to apply multiple css radial gradients to a single element

I have the following style applied to my div element: background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%); This has the desired effect (being an inner drop shadow only at the top of the div). I would like to apply the …

Read More
Changing the center point of a radial gradient in CSS

I need to make multiple gradients like below: Now see how the center of the grey/white gradient differs, in some cases it come from the center, for some from the left-center, for some from the center-bottom. I used THIS, …

Read More