Photoshop like Angle Gradient in css3 - css

Question

What will be the idea behind a photoshop like angled css3 gradient background...
Any reference??

Answer 1

there are no css3-effect that does this. you can make gradients from two or more colors, but you can't angle it.
it is possible to achieve tho, if you make your background from two/four stacked boxes, the top one from dark to medium, and the bottom one from medium to light.
edit:
this page explains radials pretty well:
http://www.impressivewebs.com/css3-radial-gradient-syntax/
edit 2:
i tried my theory in fiddle, and i think i was wrong in my statement earlier - it can't be done the way i suggested. this is the closest i came:
http://jsfiddle.net/drPMj/4/
.topbox1 {
background-image: -moz-radial-gradient(200px 150px, #777 50%, #ccc);
background-image: -webkit-radial-gradient(200px 150px, #777 50%, #ccc);
}
.topbox2 {
background-image: -moz-radial-gradient(0 150px, ellipse cover, #777, #ccc);
background-image: -webkit-radial-gradient(0 150px, ellipse cover, #777, #ccc);
}
.bottombox1 {
clear:left;
background-image: -moz-radial-gradient(200px 0, ellipse cover, #777, #ccc);
background-image: -webkit-radial-gradient(200px 0, ellipse cover, #777, #ccc);
}
.bottombox2 {
background-image: -moz-radial-gradient(0 0, ellipse cover, #777, #ccc);
background-image: -webkit-radial-gradient(0 0, ellipse cover, #777, #ccc);
}
the problem seems to be that color-stop only works away from center, not along the radial (if that makes sense). anyway, maybe my fiddle can be a start :)