Gradient text with CSS
Another straight to the point solution
In this post I will show you a few tricks on how to create gradient filled text with pure CSS. Well, almost pure :)Trick#1- For single color backgrounds
You can use this method if you want to display gradient text on a solid background (1 color). This method is not useful if you want to display text on a photo background or gradient background. It uses single image for all the text.
How to make one?
1. Create an element with solid background (single color background), for example black, and put it on the bottom.
2. Create a text element. Make it red and put in above the previous element.
3. Create an element with PNG image on the background. Put it above the previous element.
The PNG image should have the same color as your background and gradient alpha channel.
Please click "Open in new window" and take a look at the code. It's pretty self-explanatory.
Trick#2 - For all backgrounds (even photos)
This method can be used on any background, but the gradient is, well, less "beautiful", but still acceptable. It does not use any images, but needs uglier HTML code.
Basically I am creating here a lot copies of the same text ("Gradient text"), then I am filling every copy with different shade of red. Every copy is positioned in the same place, the height of each text is the same, but the height of text container is altered.
The more copies and the smaller font-size, the better result.
Comments