Transparent text with opaque text-shadow?

Question

I want transparent text from which background should be visible but text shadow should be opaque. I tried:

opacity:0;
text-shadow 3px 3px 3px orange;

but text-shadow also becomes transparent.

I want result like this:

http://blog.tmimgcdn.com/wp-content/uploads/2011/07/Glowing-Polkadots-Text-Effect.jpg?9d7bd4

Please help.

score 2 · Accepted Answer · answered Jun 26 '15 at 17:01

You can get this effect in modern browsers (Chrome, Safari and FF) using a blend mode option

.test {
  font-size: 360px;
  position: relative;
  border: solid 1px;
  display: inline-block;

  margin: 5px;
  text-shadow: orange 10px 0px 30px, orange -10px 0px 30px, orange 0px 10px 30px, orange 0px -10px 30px;
  color: black;
  background: black;
  mix-blend-mode: screen;
}

body {
  background-image: url(https://i.stack.imgur.com/08Y1e.jpg);
  }

<div class="test">STAR FIELD</div>

I uploaded the background image to avoid problems with the link

enter image description here

score 0 · Answer 2 · answered Jan 02 '14 at 17:41

if you have a solid background, you can try this way:

http://jsfiddle.net/aKp3C/

<div class="content">
    <div class="text text1">
        Example text
    </div>
    <div class="text text2">
        Example text
    </div>
</div>



body{
    background-color: #333;
}

.content{
    position: relative;
}

.text{
    font-size: 25px;
    font-weight: bold;    
}

.text1{
    text-shadow: 3px 3px 3px orange;
}

.text2{
    position: absolute;
    left: 0;
    top: 0;
    color: #333;
}

score 0 · Answer 3 · edited May 23 '17 at 12:30

You could use the text-shadow-blend-mode CSS3 property for that purpose. However, it seems it is not yet supported (Firefox 39.0 ignores it completely).

I am also struggling with (semi-)transparent text outlining. The problem is, text-shadow doesn't really generate outlines but duplicates the text behind its foreground and eventually shifts and blurs it. (Any text whose color is not opaque will be blend together with its own shadow at first.)

Currently, this may not be doable using CSS.

EDIT: You might, however, find useful this advice involving SVG and its stroke property.

Transparent text with opaque text-shadow?

3 Answers3