How to Make a Text Stroke with Transparent Text

How to make a text stroke with transparent text

You can achieve the transparent text with text-stroke with an inline svg.

You can use the <text> element (more info on MDN) set the fill property to none or transparent to make the text transparent and use the stroke porperty to make the text outline. stroke-width and stroke-color can define the texte stroke thickness and color

Here is an example: transparent text with a white stroke and a background image showing through the text:

body {

  background: url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');

  background-size: cover;

}

svg{width:100%;}

<svg viewbox="0 0 10 2">

  <text x="5" y="1" text-anchor="middle" font-size="1" fill="none" stroke-width=".015" stroke="#fff" font-family="sans-serif">Text stroke</text>

</svg>

Transparent text with solid stroke in CSS

article h1 {
color: rgba(0, 0, 0, 0.2); 
-webkit-text-stroke: 1px black;

}

Outline effect to text

There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.

What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).

Use four shadows to simulate a stroked text:

.strokeme {

  color: white;

  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

}

<div class="strokeme">

  This text should have a stroke in some browsers

</div>

Making transparent text in CSS and fitting background image inside a text shape

Try this:

element.style {
    color: rgba(0,0,0,0.0); /* for transparent color */
    -webkit-text-stroke: 1px rgba(0,0,0,1.0); /* for solid black outline */
}

UPDATED

If you need background image though the text:

.bg-though-text {

    font-size: 50px;

    font-weight: 700;

    text-transform: uppercase;

    background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6); /* Here you can use an image bg */

  

    /* This will start the magic */

    -webkit-background-clip: text; /* This will bring bg shape according to text*/

    -webkit-text-fill-color: transparent; /* This will make text color transparent */

    color: rgba(0,0,0,0.0); /* This will make text color transparent for sure */

}

<p class="bg-though-text">Gradient bg</p>

My outlined text is appearing weirdly (font lines are appearing in transparent area)

It was the font, Sinkin Sans. It's not compatible. Changing it to Helvetica fixed it and it's close enough to Sinkin that most people probably wouldn't notice.

helvetica is a bit narrower and the periods/dots are squared, but not bad

---

Related Topics