Bart Veneman

Creator of Project Wallace, analytics for CSS. <noscript>-fanboy. Serverless clearfix engineer. I can lift node_modules twice my own weight.

CSS tip - double text stroke

While watching the 2012 Olympics in London on television I saw BMX riders cycling on their tiny bikes with amazing speeds. The shirt of the Colombian riders made me come up with the following double text stroke with css.


<h1 class="stroked">Colombia</h1>


@import url("");

.stroked {
font: 8em/1 Bangers, sans-serif;
text-align: center;
-webkit-text-stroke: .025em #fff; /* The white stroke, first from inside out */
-webkit-text-fill-color: #444; /* Make the inner text white */
text-shadow: /* These four shadows create the most outer stroke */
-.025em -.025em 0 #444,
.025em -.025em 0 #444,
-.025em .025em 0 #444,
.025em .025em 0 #444;
color: #fff; /* For non-webkit-browsers */

That last css rule acts as a fallback for browsers that don’t support the text-stroke property. It makes the text go white instead of dark gray.

The effect doesn’t look really great at large font-sizes, but for the time being it will do. I am aware that there are several methods to accomplish this kind of effect, but it seemed nice to give this a try.

Real world example on CodePen.