How would I achieve a shadow that won’t show through transparent text?

Question

How would I achieve this look without images/paths?

I need text with a thick border, and a shadow that won’t show through transparent text.

I have already tried normal text-shadow, but it didn’t work the way I needed.

I tried using an SVG, but it didn’t provide the flexibility I needed, and same for images.

It's also not very helpful to ask without showing what you've already tried yourself, and explaining why it didn't work. — BenM, Feb 25 '19 at 16:44
Obviously this is not possible if the text is truly transparent. — Paulie_D, Feb 25 '19 at 16:45
U might find this useful: https://stackoverflow.com/questions/2570972/css-font-border — Amiratak88, Feb 25 '19 at 16:46
Sorry for sounding like a total jerk in the question, thanks for the help. I’m sort of new to this community, and not really sure how it all works. — Elijah Ciali, Feb 25 '19 at 17:11
but what @BenM made isn't transparent? you aren't asking for transparency or it's ok if the color is set the same as background? because in this case it's a simple text-shadow and we have a plenty of dupes — Temani Afif, Feb 25 '19 at 19:41

score -1 · Answer 1 · answered Feb 25 '19 at 17:00

* {
    box-sizing: border-box;
    font-family: inherit;
}

html {
    font-size: 62.25%;
}

body {
    font-family: sans-serif;
    font-size: 1.6rem;
    background: linear-gradient(to right, rgb(0, 128, 111), rgb(199, 189, 57));
}

h1 {
    background: transparent;
    color: transparent;
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  text-shadow: 3px 3px 0 rgb(54, 54, 54);
  
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgb(0, 0, 0);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
 
}

<h1>Hello World</h1>

How would I achieve a shadow that won’t show through transparent text?

1 Answers1