4 CSS Text Effects

  • follow us in feedly
Published February 21, 2013 by Brad Knutson
CSS Text Effects

Below are four examples of some cool CSS text styles and techniques. All these examples are non-animated CSS3 techniques (animated CSS3 is for a later post), but they each have their place on the web. These types of styles are easy to do in Photoshop, but a little more difficult in CSS.

Let’s go over these four short examples. 3D Text, Gradient Text, Rotated Text, and Outlined Text.

3D Text

Browser Support


.text-3D {
	text-shadow: 0px 1px 0px #CCC,
		     0px 2px 0px #C9C9C9,
                     0px 3px 0px #BBB,
                     0px 4px 0px #B9B9B9,
                     0px 5px 0px #AAA,
                     0px 6px 1px rgba(0,0,0,0.1),
                     0px 0px 5px rgba(0,0,0,0.1),
                     0px 1px 3px rgba(0,0,0,0.3),
                     0px 3px 5px rgba(0,0,0,0.2),
                     0px 5px 10px rgba(0,0,0,0.25),
                     0px 10px 10px rgba(0,0,0,0.2),
                     0px 20px 20px rgba(0,0,0,0.15);

Gradient Text

Browser Support


	background: -webkit-linear-gradient(#333333, #EFEFEF);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

Rotate Text

Browser Support


.rotate-text {
	position: absolute;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);

Outlined Text

Browser Support


.text-stroke {
	/* Chrome and Safari */
	-webkit-text-stroke: 1px #000000;
	/* All Browsers Except IE */
	text-shadow:-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">