Adding text stroke effect with CSS

Create a nice css outline or stroke effect to your textUsing CSS to create nice text effects is a good alternative to creating text effects as images, since the text is easier to update and maintain, and is performing better from a SEO perspective.

In this post you’ll learn to create a nice text stroke effect for webkit based browsers with CSS.

Stroke effect with CSS

Before proceeding with this tip, please notice, that this trick only works with webkit based browsers like Google Chrome and Safari.

The stroke effect might be possible with “standard” CSS, and supported by more browser at a later point in time, but right now it’s only supported by webkit based browsers.

To create the effect, you need to use the following CSS for a text:

txt1 {
   -webkit-text-stroke: 1px black;
   -webkit-text-fill-color: white;
}>

This code creates a nice white text with a 1 px black outline

Create a stroke effect for your text with css

You can also combine some of the other webkit based CSS possibilities, like CSS shadow and Gradient text, to create a quite impressive text effect:


.txt5 {
 FONT-FAMILY: Comic Sans MS, Brush Script MT;
 font-size: 50px;
 -webkit-text-stroke: 1px black;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#333));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 text-shadow: 0.1em 0.1em 0.2em black;
}

Combining css shadow outline and gradient to a nice text effect

You can see a demo here (requires a webkit based browser)

Conclusion

Webkit based browsers are capable of displaying quite complicated graphical effects with CSS.

Text stroke is a nice effect, and when it’s applied through CSS, you keep the SEO benefits, and makes your site easy to maintain.

If you don’t have a webkit based browser the text will just be black.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Comments are closed.