drag and share
  • Twitter
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • Stumbleupon

CSS Gradient Text Effect

By: OSH Editorial    In: CSS Tips and tricks

Karma - Responsive bootstrapped webapp

While brouwsing on the web i found this very nice CSS trick how to created a gradient text effect with a PNG image. Now you dont have use a program like Photoshop to created a gradient text effect. This trick is very easy and does not need lots of code as you can see below.

Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.


The benifits of this trick are

  • This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
  • It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
  • You can use on any web fonts and the font size remains scalable.

This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6.

See a demo here

Written by: OSH Editorial

No Bio yet...

Share this Story

If you enjoyed reading, consider sharing the love with the rest of the world.

No Comments

As you can see there are no comments, so write the first one!

Add Your Comment

Your name

May 22, 2019

We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!