Add a Drop Shadow to Transparent Text with CSS

Add a drop shadow to transparent text with CSS

Here's a solution that works on Chrome and Safari:

Fiddle

Basically, the idea is to have 2 div overplayed on each other. The lower one provides the background and the shadow. And the the div above just uses a mask to cut out the exact same text from the background image, so that it covers the text of lower element, but not the shadow:

div {
    position:absolute;
    top:0;
    left:0;
    background-image: url(http://i.imgur.com/EWDVnfb.png);
    font-family: sans-serif;
    font-size: 100pt;
    font-weight: bold;
    line-height: 2em;
    padding: .5em;
}
div.shadow {
    color: #fff;
    text-shadow: 0 0 .5em #F00;
}
div.text {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

EDIT

I just found a wonderful article on css-tricks.com So, there seems to be a solution with much better browser support. The idea is to replace the top-layer div by and svg containing the same text and use a pattern to fill the text with the background image, here's a sketch:

<div class="shadow">Test</div>
<div>
    <svg width="400" height="200">
        <pattern id="mask" patternUnits="userSpaceOnUse"
             width="400" height="200" viewbox="0 0 400 200">
            <image xlink:href="..." width="300" height="300" />
        </pattern>
        <text x="0" y="1em">Test</text>
    </svg>
</div>

CSS (in addition to the CSS of my above solution):

text {
  fill:url(#mask);
}

I've been trying to get this to work as well, with partial success. (DEMO) But I'm not very good with svg's and someone else might be able to fix it. Anyway, the weakness here is that positioning this correctly and reliably is a real pain while you get that automagically right with the Webkit-only solution.

Transparent text with opaque text-shadow?

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(http://i.stack.imgur.com/08Y1e.jpg);  }

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

CSS Text Shadow Opacity

Specify the color in RGBA (Red,Green,Blue,Alpha)

Where Alpha is the opacity (0 - 1)

Something like:

text-shadow: 0 1px 0 rgba(0,0,0,0.5);

For half transparent black shadow.

Text-Shadow with transparent text color

I'd suggest instead trying out the text-stroke property for the same effect and less trouble. Example below, cheers.

body {
  background: url(https://picsum.photos/seed/picsum/800/800) no-repeat center;
  background-size: cover;
}

h1 {
  text-align: center;
  font-size: 7rem;
  font-weight: 600;
  font-family: 'Segoe UI';
  margin: 0;
  color: transparent;
  text-stroke: 2px #000;
  -webkit-text-stroke: 2px #000;
}

<h1>NIFTY TEXT</h1>

Is it possible to set transparency in CSS3 box-shadow?

I suppose rgba() would work here. After all, browser support for both box-shadow and rgba() is roughly the same.

/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

div {    width: 200px;    height: 50px;    line-height: 50px;    text-align: center;    color: white;    background-color: red;    margin: 10px;}
div.a {  box-shadow: 10px 10px 10px #000;}
div.b {  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);}

<div class="a">100% black shadow</div><div class="b">50% black shadow</div>

How to have a drop shadow on a transparent rect svg

You can't do this if the original is a fully transparent shape - because of reasons - but you can do this starting from an almost completely transparent original shape and end up with a fully transparent shape surrounded by a normal drop shadow.

Draw your shapes with 1% fill-opacity. When you pull those into a filter, multiply their alpha by 100 using a colormatrix - and use that as the basis for your dropshadow. You won't end up using the original 1% opacity shape in your final version because if you use the "out" operator - this discards the contents of anything that overlaps with the original (processed) shape.

svg {  background: #33D; }

<svg width="500px" height="400px"><defs>  <filter id="trans-shadow">  <feColorMatrix type="matrix" values="1 0 0 0 0                                        0 1 0 0 0                                        0 0 1 0 0                                        0 0 0 100 0"                                       result="boostedInput"/>                                         <feGaussianBlur stdDeviation="5"/>  <feComposite operator="out" in2="boostedInput"/>  </filter></defs>

<circle filter="url(#trans-shadow)" x="100" y="100" r="050" cx="150" cy="150" fill="black" fill-opacity="0.01" />

</svg>

text shadow same as font color with transparency

I write small jQuery function for my solution

$("p").each(function() {
    textShadow = $(this).css("color").replace(')', ', 0.75)').replace('rgb', 'rgba');
    $(this).css('text-shadow', 'rgba(255, 0, 0, 0) 0 0 0, ' + textShadow + ' 0 0 0.001px');
});

Reference stackoverflow Question

Text shadow opacity

Yes, but specify color in rgba mode to add alpha transparency.

h1.blue {text-shadow: 3px 3px 0px rgba(63,107,169, 0.5)} //half of transparency

---

Related Topics