Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
Question belongs on StackOverflow –  DA01 Feb 13 '12 at 4:22
add comment

2 Answers 2

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 Mazur 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
add comment

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
add comment

Your Answer

 
discard

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.