Outlined Transparent Text

When creating a web page, there may be times when you want the background to show through the text. It can be done with CSS.

Here is the technique, in essence:

• The text is given the CSS declaration color:transparent; to allow the background to be visible.

• The text is outlined with a solid color so the shape of the text is visible. The CSS properties -webkit-text-stroke-width and -webkit-text-stroke-color are used for that.

The technique described in this article works best with larger text.

Here is the CSS to implement this:

color:transparent; 
-webkit-text-stroke-width:5px; 
-webkit-text-stroke-color:blue; 

Change 5px; to your preferred width of the stroke around the letter. And change blue; to your preferred color for the outline.

The above code is CSS that the illustration uses for the poem's "Flowers!" title. The title's transparent letters have a 5 pixels wide blue stroke.

Here is the illustration.

The background is a gradation of various colors into each other. The transparent and outlined text is on top of the colors.

As you can see from the hint near the yellow band of color, the color of the outline needs to contrast sufficiently with the background to allow the letters to be seen.

Here is the source code for the illustration. Notes follow.

<div style="
background:linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
padding:20px;">

<div style="
color:transparent; font-size:60pt; font-weight:bold; 
-webkit-text-stroke-width:5px; -webkit-text-stroke-color:blue; 
">
Flowers!
</div>

<div style="
color:transparent; font-size:40pt; font-weight:bold; line-height:50pt; 
-webkit-text-stroke-width:2px; -webkit-text-stroke-color:white; 
">
Roses are red.<br>
Violets are blue.<br>
Flowers can come<br>
In any hue.
</div>

</div>

Notes —

The containing div has the CSS for a gradient of colors to demonstrate the transparency of the letters.

The two divs that contain text demonstrate how to outline transparent text.

Each of the divs has 2 lines of inline CSS. The first line defines the font characteristics. The second line specifies the outline characteristics. The CSS can be placed in a CSS style sheet instead of inline. They are presented inline for easier demonstration.

The headline CSS:

Those 2 lines of inline CSS are the rules for the transparent and outlined headline text.

color:transparent; font-size:60pt; font-weight:bold; 
-webkit-text-stroke-width:5px; -webkit-text-stroke-color:blue; 

The font color is transparent. Its size is 60 points. And its weight is bold.

The outline is 5 pixels thick and the outline's color is blue.

The poem lines CSS:

Those 2 lines of inline CSS are the rules for the transparent and outlined text of the poem.

color:transparent; font-size:40pt; font-weight:bold; line-height:125%; 
-webkit-text-stroke-width:2px; -webkit-text-stroke-color:white; 

The font color is transparent. Its size is 40 points. The font's weight is bold. And the height of each line is 50 points.

The outline is 2 pixels thick and the outline's color is white.

As noted earlier, larger fonts work better for outlining than smaller fonts. Bolded letters generally are better than normal weighted letters. The font style or family can make a difference, too. Fonts with serifs and cursive fonts may have thin parts of the letters that get visually lost in the outline.

When you want the background to show through text, and your letters are large and bold enough for this technique, they can be transparent with an outline.

(This content first appeared in Possibilities newsletter.)

Will Bontrager