CSS Text Stroke Generator

To use this text stroke/outline tool adjust the values and copy the generated code on the right.

Preview options

CSS Text Stroke Preview

What is This tool?

It is a simple tool that offers all the necessary adjustment options for creating nice CSS text stroke effects.

Text-stroke was implemented in CSS3 and is one of the less well-known of the newer styling features, among which are border-radius and box-shadow.

text-stroke: 2px rgba(0,0,0,0.6);

As you can see in the code example above, text-stroke has two properties. The first is the width of the stroke in pixels, the second is the colour of the stroke, which can be given transparency by using an rbga value.

text-stroke: 2px rgba(80,167,225,1);
    color: #ffffff;

Text-stroke browser support

Chrome
Safari
Firefox
Opera
Edge
Android
iOS
4+
3.1+
49+
15+
15+
2.1+
3.2+