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 Feb 13 '12 at 4:22

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 Feb 11 '12 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 Feb 11 '12 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, privacy policy and cookie policy

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