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

Question

-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?

Banna

Answer 1

You can use the background-size property together.

like this:

div {
    height: 100px;
    width: 100px;
    border: 1px solid black;

    background: radial-gradient(ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
    background-size: auto 30px;
    background-position: top;
}

<div></div>

Formulism

love this way. only thing that should be noted is that you have to add background-repeat:no-repeat; :] ty – Banna

oh never mind your example had that already... lol. Thanks again – Banna

background-repeat:no-repeat seems to be necessary. :) – Formulism

Answer 2

In CSS3:

radial-gradient(ellipse at center center, 
  rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px, 
  rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%) 

You can have multiple stops in the gradient. You can also specify length in pixels rather than percentages. You can also use rgba to make transparent colours.

You start with your first colour at 0%, the center.
Then you have the second colour at x pixels (I'm using x=100 pixels here).
Then you go to transparent white at x+1 pixels.
And stay transparent all the way until 100%.

this should work in browsers that support CSS3.

Bookstore

Answer 3

css3 gradients are background images so they will fill the entire height and width of the block element, just as if it were a solid color.

In order to limit the height of the gradient, limit the height of the element. A "clean" way to do this might be to use a pseudo element. Something like...

div {height: 500px; width: 500px; position: relative}

div:before {
     content: " ";
     width: 100%;
     height: 30px;
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     display: block;
     background-image: [your-gradient-here]
}

Pond

when doing this on bootstrap .panel-body, i had to set the z-index of the div with the content to 0, or the gradient div would be invisible. – Blowzed

Answer 4

Well, as long as the rest of the gradient (after your set number of pixels) can be a fixed color, just use three color stops as follows (this e.g. stops at 30px - notice the last entry is identical to the second):

background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);

Chastity

This. Add background-image and woosh you can combo it on the same line as background color :) – Wrenn