Gradient that stops at a particular height and continues further with a solid color

Question

I want to have a gradient in HTML/CSS.

Assume some DIV is always more than 400px tall. I want to add the gradient so that it is #FFFFFF at the top and #EEEEEE at 300px. So the first 300px (height-wise) is a nice 'white to grey' gradient. After 300px, regardless of how tall the DIV goes, I want the background color to stay #EEEEEE.

I guess this has something to do with gradient stops (?)

How can I do it?

P.S. If it is not possible in IE I don't care. I am fine if gecko and webkit browsers show this properly.

Answer 1

background-color: #eee;
background-image:         linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image:    -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */

This is according to the current Mozilla documentation: https://developer.mozilla.org/en/CSS/-moz-linear-gradient.

I've confirmed that it works in Firefox 3.6 and Chrome 15.

Answer 2

Alternative way

background-color: #eee;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);

background-repeat:no-repeat;
background-size:100% 300px;

Answer 3

height: 400px;    
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));

You might have to play with 0.75 as it's a percentage of your height, but that should do the trick.

Answer 4

First, it's good to know that you can use more than 2 color-stop on gradients, but you can't use fixed pixels as coordinates, it has to be a percentage.

In your case, you can simply define your first color-stop at 0% and the second one at 50% or so. I suggest you to use a gradient generator because the implementation depends on the browser.

I came up with

background: #FFFFFF; /* old browsers*/ 
background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 50%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE', GradientType=0); /* ie */

Answer 5

background: -moz-linear-gradient(top,  #d7d7d7 0px, #f3f3f3 178px);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d7d7d7), color-stop(178px,#f3f3f3));
background: -webkit-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -o-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -ms-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);

this works for me

Answer 6

You could do a:

<div id="bgGen"></div>

then

#bgGen{
   height: 400px;    
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
   margin-bottom:-400px;
}

It is kinda cheating, but it works...

Answer 7

I had the same thing just now. I wanted to put a gradient on the main content div which varied significantly in height from page to page.

I ended up with this and it works great (and not too much extra code).

CSS:

.main-container {
  position: relative;
  width: 100%;
}
.gradient-container {
  /* gradient code from 0% to 100% -- from colorzilla.com */
  height: 115px; /* sets the height of my gradient in pixels */
  position: absolute; /* so that it doesn't ruin the flow of content */
  width: 100%;
}
.content-container {
  position: relative;
  width: 100%;
}

HTML:

<div class="main-container">
  <div class="gradient-container"></div> <!-- the only thing added for gradient -->
  <div class="content-container">
    <!-- the rest of my page content goes here -->
  </div>
</div>

I highly recommend using colorzilla's gradient-editor to generate the CSS. It makes cross-browser optimizing really easy (especially if you're used to Photoshop or Fireworks).

Answer 8

The easiest solution for the problem is to simply use multiple backgrounds and give the gradient part of the background a defined size, either in percentage or in pixels.

body {
  background: linear-gradient(to right, green 0%, blue 100%), green;
  background-size: 100px 100%, 100%;
  background-repeat: no-repeat;
  background-position: right;
}

html,
body {
  height: 100%;
  margin: 0;
}

Mix and match with browser prefixes as necessary.

Answer 9

this worked for me

    background: rgb(238, 239, 240) rgb(192, 193, 194) 400px; 
background: -webkit-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: -moz-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background-repeat:repeat-x; background-color:#eeeff0;

Also someone commented why not just make a gradient image and set it as the background. I prefer to go mostly css now too, with mobile design and limited data usage for visitors, try to limit as much images as possible. If it can be done with css than do it