Fading CSS Gradient?

[NoizyCr1cket]

Hi. I am trying to make a css gradient fade to a different color gradient. I didn’t use a background image because I know you can’t fade those, but can you fade a gradient?

Here’s a test page to show you what I need to fade: http://www.gchiller.com/gradient-fade
(The gray border is just to show the rollover area, it won’t be there in the final product.)

[chrisburton]

I think what you might be looking for is `box-shadow`.

[JohnMotylJr]

@NoizyCr1cket, would you want to try a JavaScript way of absolving this problem?

[NoizyCr1cket]

@ChristopherBurton : I’ll check that out

@John : Sure, if it works and is relatively simple.

[NoizyCr1cket]

@ChristopherBurton : I tried recreating the size of the gradient using box-shadow, but I can’t seem to get the sizes right. Could you please help? The original gradient is 12px wide.

[chrisburton]

@NoizyCr1cket

http://jsfiddle.net/vhCwj

[JohnMotylJr]

@NoizyCr1cket,

Is there some kind of event that fires the ‘fade’ for the gradient (hover, click, mousedown, etc)?

Otherwise Chris got it by adding the box-shadow.

[JohnMotylJr]

Ok, i totally was misunderstanding what you were wanting, glad these guys could help ya out. And i never really thought about my name with the underscores before, thanks for the heads up

[NoizyCr1cket]

@ChristopherBurton, thanks! I got it working with transitions.

@John, Sorry, I decided to use the box-shadow method. But thanks anyway!

P.S. Not sure if you already know this, but, since your username has underscores on both sides, when I try to @ it, it makes it italicized so I have to just use “@John”. No big deal.

[Taufik Nurrohman]

Extra markup: http://jsfiddle.net/vhCwj/1/

[Author]

Posts