Как бы получить тень, которая не будет видна через прозрачный текст?

Question

Как бы мне добиться этого без изображений / путей?

Мне нужен текст с толстой рамкой и тенью, которая не будетпоказать сквозь прозрачный текст.

Я уже попробовал обычный text-shadow, но он не сработал так, как мне нужно.

Я пытался использовать SVG, но это не помоглообеспечить необходимую гибкость, и то же самое для изображений.

Answer 1

* {
    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>