Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
Question belongs on StackOverflow – DA01 Feb 13 '12 at 4:22
up vote 3 down vote accepted

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 );
share|improve this answer
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
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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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