CODEWITHSUNDEEP
css
Megatron
Megatron

Reputation: 2949

can you fade gradients in divs?

I was curious if it's possible to fade from one gradient to another inside a div in css3? I would like to be able to have one gradient start fading into another around the center of the div background.

(for instance, a fade like here http://garyoak.com/images/fade.png )

I know how to do the gradients individually, but i have no idea how to do fade 1 gradeint into a another if it's possible. If it's not possible, is there way to accomplish this effect? I was thinking of stacking two divs on top of each other, each one backed with a different gradient and having the top one fade horizontally, but again I'm not really sure how to do that.

I could combine the gradients into one single horizontal gradient, but i already have all the single colour gradients defined and it'd take quite abit of time to correctly combine them together, especially if i decide to change one of the gradients. I basically just want to avoid having to define and update seperate gradients to fade two existing gradients together.

If someone could help me out/point me to a proper resource to figure this out, I'd appreciate it.

thanks

Upvotes: 0

Views: 576

Answers (1)

OverZealous
OverZealous

Reputation: 39580

I just answered a similar question, see here for an example of how to do multiple gradients:

Question about a specific gradient with css3

Upvotes: 1

Related Questions