38

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • 5
    why don't you use a 1px by 300px background image of the gradient #FFF - #EEE (I know this is a little archaic given CSS3) you could get it to repeat-x but not y and then set the background colour as #EEE, so beyond 300px the background image of the gradient stops and the solid colour fills in – Dan Hanly Feb 16 '11 at 13:33
  • 3
    @Daniel haha.. thats what I used to do till, this time, when I thought I'd try some of the newer stuff in HTML(5) and CSS.. :D This ain't some production site, its just exploring. So the goal is more about getting it to work using CSS3 instead of just getting it to work on time. –  Feb 16 '11 at 14:28

9 Answers9

36
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.

John
  • 1
  • 13
  • 98
  • 177
ReganY
  • 461
  • 4
  • 3
15

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;
seanjacob
  • 2,238
  • 1
  • 22
  • 25
10
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.

TNC
  • 5,388
  • 1
  • 26
  • 28
  • um.. can't I tell it to stop at a particular PIXEL value rather than a PERCENTAGE value? –  Feb 16 '11 at 13:23
  • 10
    Here ya go: `height: 800px; background: -webkit-gradient(linear, left top, 0 300, from(#fff), to(#eee)); }` That will always stop at 300px. – TNC Feb 16 '11 at 13:33
  • 1
    you're supposed to explicitly specify pixels as in `300px` (didn't downvote though btw). It swallows up all sorts of values in contrast to the old `-webkit-linear-gradient` which only knows `0.0-1.0` and `0-100%` and can't stop at pixel values. – Silviu-Marian Apr 10 '12 at 07:05
  • That's why there's another comment above yours, from me, with the pixel value. :) – TNC Apr 10 '12 at 18:27
  • 1
    Yes but what you have there is `...top, 0 300, ...`; it needs to be `...top, 0 300px, ...` – Silviu-Marian Apr 10 '12 at 20:49
  • Thanks for catching the typo. – TNC Apr 10 '12 at 21:25
  • 2
    Another reason this should be downvoted is because it only works in webkit, but the asker said gecko and webkit were wanted. – fabspro Oct 06 '13 at 07:36
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 */
Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
Baztoune
  • 1,215
  • 1
  • 16
  • 20
  • 3
    You can use pixels in webkit browsers. Where you reference `left top, left bottom` you can put pixel values there. See my example below. – TNC Feb 16 '11 at 13:35
  • Good to know. Which version of Chrome/Safari do you use? IS-it related to this [blog post](http://www.webkit.org/blog/1424/css3-gradients/)? – Baztoune Feb 16 '11 at 13:46
  • Be aware that the webkit syntax is in flux... http://www.webkit.org/blog/1424/css3-gradients/ – Chris Bentley Feb 16 '11 at 14:12
3
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

Vicky Biswas
  • 39
  • 1
  • Ok, taken from http://www.colorzilla.com/gradient-editor/ & just removed the comments, respectively put px values as second unit argument - not very inventive. – Volker E. May 01 '14 at 21:21
3

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.

Etheryte
  • 24,589
  • 11
  • 71
  • 116
2

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).

Scrimothy
  • 2,536
  • 14
  • 23
2

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

Addo Solutions
  • 1,619
  • 3
  • 20
  • 37
0

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

user3438298
  • 45
  • 1
  • 11