CSS Gradient Text Effect  

Posted by Hanush H Nair in

Inspired by webdesignerwall's CSS Gradient Text Effect. I developed something I think might be useful for the common. Using his CSS, I developed this


This technique may be very useful when you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).


Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).







Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!


All you have to do is

  • Type in your text
  • Copy the code at top
  • Paste them anywhere below head tag.
  • Now copy the code found in the text area below the text font you want
  • And paste it in you site anywhere below body tag where you want them to appear.
Use the easy Wizard

Download CSS

This entry was posted on Monday, June 2, 2008 at Monday, June 02, 2008 and is filed under . You can follow any responses to this entry through the comments feed .



it's real nice, but you really shouldn't hotlink..tsk..tsk.

June 13, 2008 at 3:11 AM

thanks, sorry for hotlinking, if it hurt you

June 14, 2008 at 10:55 PM

Post a Comment