Photoshop like Angle Gradient in css3

Problem

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

Angled Gradient BG

Any reference??

Problem courtesy of: SaurabhLP

Solution

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

Solution courtesy of: labtoy

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.