General Discussion - Fade Colour in CSS

Print Page | Close Window

Fade Colour in CSS

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: General Discussion
Forum Description: General discussion and chat on any topic.
URL: https://forums.webwiz.net/forum_posts.asp?TID=12783
Printed Date: 01 April 2026 at 5:14pm
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: Fade Colour in CSS

Posted By: Amateur
Subject: Fade Colour in CSS
Date Posted: 01 December 2004 at 1:02pm

Hi,

I am wondering if someone could help me please. How do I fade a colour on a page using CSS. For example, if i'm using the colour red, i want it to begin red and then fade out to another colour.

Is this possible? More info needed?

Thanks

Replies:

Posted By: dpyers
Date Posted: 01 December 2004 at 3:01pm

Usually that's done with a background image. An example is at http://www.netcapability.com - www.netcapability.com where the grey top and bottom fades towards the center.

-------------

Lead me not into temptation... I know the short cut, follow me.

Posted By: Amateur
Date Posted: 02 December 2004 at 7:31am

Thanks for your reply. Unfortunately I need to use a colour and not an image to do this. Any other ideas?

Posted By: Semikolon
Date Posted: 02 December 2004 at 7:34am

I think it's possible using javascript and/or css in some way.. I think I have seen it somewhere, but a long time ago, so I'm not 100% sure

Posted By: dpyers
Date Posted: 02 December 2004 at 7:58am

I think there's a gradient filter in DHTML - probably only works in IE though.

-------------

Lead me not into temptation... I know the short cut, follow me.

Posted By: Amateur
Date Posted: 02 December 2004 at 8:00am

dpyers wrote:

I think there's a gradient filter in DHTML - probably only works in IE though.

Yeah i have come accross few ways of doing it but they all only work with IE

Posted By: hgurol
Date Posted: 02 December 2004 at 1:42pm

style=filter:alpha(opacity=85); -moz-opacity:0.85; opacity:0.85;

this might be what you are looking for....and it also works with netscape brothers

take a look at how it works on my site http://www.dmbturkiye.gen.tr - http://www.dmbturkiye.gen.tr

ps: hmmm no, sorry this is not what you are after.... Unhappy

-------------
People in every direction...

Posted By: dpyers
Date Posted: 02 December 2004 at 2:13pm

That's a neat little trick though. Works in fireFox as well.

-------------

Lead me not into temptation... I know the short cut, follow me.