0

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

Megatron
  • 2,871
  • 4
  • 40
  • 58
  • possible duplicate of [CSS3 animation with gradients](http://stackoverflow.com/questions/5654510/css3-animation-with-gradients) – jtbandes Jul 31 '11 at 03:08

1 Answers1

1

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

Question about a specific gradient with css3

Community
  • 1
  • 1
OverZealous
  • 39,252
  • 15
  • 98
  • 100