Grow your CSS skills. Land your dream job.

Fading CSS Gradient?

  • # November 3, 2012 at 9:58 pm

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

    # November 3, 2012 at 10:08 pm

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

    # November 3, 2012 at 10:19 pm

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

    # November 3, 2012 at 10:41 pm

    @ChristopherBurton : I’ll check that out

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

    # November 3, 2012 at 10:58 pm

    @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.

    # November 3, 2012 at 11:29 pm

    @NoizyCr1cket

    http://jsfiddle.net/vhCwj

    # November 4, 2012 at 12:31 am

    @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.

    # November 4, 2012 at 1:03 am

    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

    # November 4, 2012 at 1:19 am

    @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.

    # November 4, 2012 at 1:29 am

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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".