I wanted to make a rather simple double-CSS3 gradient background, which would look like the one in use on my website now. I can't, however, conjure up the code to get both gradients working at once. Can anyone help me? The background image: http://theapplenewsreel.com/Photos/background-main.jpg Once you see it, you'll understand why I want to get rid of the image. Banding on the gradients, plus the 715kb size, make for a cumbersome file.

  • Question belongs on StackOverflow
    – DA01
    Commented Feb 13, 2012 at 4:22

2 Answers 2


You might try here: Ultimate CSS Gradient Genrator

background: #2c2c2c;
background: -moz-linear-gradient(top,  #2c2c2c 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c2c2c), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top,  #2c2c2c 0%,#ffffff 100%);
background: -o-linear-gradient(top,  #2c2c2c 0%,#ffffff 100%);
background: -ms-linear-gradient(top,  #2c2c2c 0%,#ffffff 100%);
background: linear-gradient(top,  #2c2c2c 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#ffffff',GradientType=0 );
  • Thanks for your help so far, that works for the dark grey to light grey gradient. Is there any way to also (simultaneously) include the gradient for the center column? It doesn't show up using the above code.
    – Jules
    Commented Feb 11, 2012 at 5:21
  • 1
    You can't have that dark-light-dark stripe pattern in a single gradient. You would need multiple columns in the design (code) and apply the needed gradient to the column. In other words, the white stripe is not possible with a single css gradient.
    – Scott
    Commented Feb 11, 2012 at 6:13

Alright, I figured out how to do that: I made a 100% height 1000px width container , and set the background to a CSS gradient generated by that gradient generator you suggested.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.