Create a Glass Text Effect Using Only CSS

Creating interesting looking text in Photoshop is a great way to add in some flair to your work, and the same can be said about websites. Creating interesting text effects using nothing more than a bit of CSS can add in small touches of pizazz into your own web presence.

Glass text in Photoshop (in the image above) looks phenomenal, and creating something similar with code was a project that was in my mind for a bit. While the results are close, there is unfortunately no way at present to add in an inner shadow element with CSS, so it requires some extra tricks to achieve.

First the style code:

.glass {

font-family: “Times New Roman”, Times, serif;

background: transparent;

filter: alpha(opacity= 15);

-moz-opacity: .25;

opacity: .25;text-shadow: rgba(255,255,255,.99) -1px -3px, rgba(0,0,0,0.3) -2px -1px, rgba(0,0,0,0.5) 0 1px, rgba(255,255,255,0.7) -1px -3px;

font-size: 55pt;

}

As you can see above the idea is to use a specified hook and only color our ‘Glass’ Element otherwise it would be too much visually. The code above looks like this when it’s applied:

Glassy Text!

Depending on what browser you are using, the above text should look glassy. However, if you are using IE or another browser like it, you are seeing the very graceful degrade (which there are solutions for). While this effect can work nicely on a solid color background, it looks best with a slight pattern, dark or light.

Here it is on a lighter background:

Light Background

And a Darker Background:

Dark Background

Nice right?