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

Question

CSS color has no transparent input that is they are all solid. So I tried to set opacity using rgba for the color property but the image background is not showing through the text. Is there a way to do this? So there a background image and heavy text on top that needs to be transparent only showing the letters outline.

I wish to have result like on example dank.sh

Does this answer your question? [How to make a text stroke with transparent text](https://stackoverflow.com/questions/30050556/how-to-make-a-text-stroke-with-transparent-text) — ecrb, May 06 '20 at 22:23
yes I tried this https://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css — johnmadta, May 06 '20 at 22:30

score 6 · Accepted Answer · edited May 07 '20 at 10:15

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>

UPDATE 2

Transparent text, white bg and image behind.

.bg {
    background-image: linear-gradient(90deg, #a50026, #d3322b, #f16d43, #fcab64, #fedc90, #faf8c0, #dcf1ec, #abd6e8, #76abd0, #4a74b4, #4a74b4);
    padding:20px;
    text-align: center;
}

.transparent-text {
    font-size: 50px;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 5px;  
    padding: 5px 10px;
  
  /* Here we go */

    background: #fff;
    color: #000;
    mix-blend-mode: screen;
}

<div class="bg">
    <p class="transparent-text">Transparent text</p>
</div>

UPDATE 3

An SVG solution, IE11 supports:

.bg {
    background-image: linear-gradient(90deg, #a50026, #d3322b, #f16d43, #fcab64, #fedc90, #faf8c0, #dcf1ec, #abd6e8, #76abd0, #4a74b4, #4a74b4);
    padding:20px;
    text-align: center;
}

<div class="bg">
    <svg viewbox="0 0 100 60">
        <defs>
            <g id="text">
                <text text-anchor="middle" x="50" y="23" font-size="12">Transtarent text</text>
            </g>
            <mask id="mask" x="0" y="0" width="100" height="50">
                 <rect x="0" y="0" width="100" height="40" fill="#fff"/>
                 <use xlink:href="#text" />
           </mask>
       </defs>
    <rect x="5" y="5" width="90" height="30" mask="url(#mask)"  fill="#fff" fill-opacity="1"/>
 </svg>
 </div>

I need the text framed in white background, then underneath the image, like in dank.sh link I gave. — johnmadta, May 07 '20 at 00:39
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode - it supports Edge. for IE - sorry, you will have to use simple png image. nothing we can do there. all modern browsers will work fine. glad to help you — focus.style, May 07 '20 at 01:17
This solution is valid enough to have an article here https://www.w3schools.com/howto/howto_css_cutout_text.asp — focus.style, May 07 '20 at 09:50
Updated an SVG solution for you. But I suggest to use mix-blend-mode: screen; — focus.style, May 07 '20 at 10:07
Thanks focus style, your update 2 works for me since it also works with Edge, IE is no longer important. — johnmadta, May 07 '20 at 17:33

score 0 · Answer 2 · answered May 06 '20 at 22:26

0

Opacity is your friend:

#id {
    opacity: 0.5; // For 50% opacity
}

answered May 06 '20 at 22:26

Antoni Silvestrovič

985
8
25

opacity is making my whole div container transparent I only need the letters or text trasnparent like this https://dank.sh/. – johnmadta May 06 '20 at 22:36
You need to adjust opacity of the element which contains text. If you have text directly in your container div, just put the text in another div without background and adjust opacity of that – Antoni Silvestrovič May 06 '20 at 22:37
I did that but the white background need to be opaque like in the dank.sh example, only the letters need to be transparent. – johnmadta May 07 '20 at 00:37
The dank.sh example uses SVG, which would be the most cross-browser compatible thing to do. Otherwise you could look into `-webkit-background-clip` property, but I wouldn't recommend it as it's not widely supported. – Antoni Silvestrovič May 07 '20 at 00:42
So you can create the text in any vector-based software, and export SVG code for it – Antoni Silvestrovič May 07 '20 at 00:43

score 0 · Answer 3 · edited May 07 '20 at 10:36

0

.text {
    opacity: 0.7; /* Can be varied to the transparency you want */
}

The opacity will change the text transparency.

edited May 07 '20 at 10:36

ejuhjav

2,660
2
21
32

answered May 07 '20 at 08:35

RingGamesCompany

153
1
9

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

3 Answers3