Showing text shadow as only text stroke using CSS3 !!!

Consider the image showing the design element above. Herein the design requires the text shadow to only be composed of text stroke. If that wasn’t a problem already – on careful observation we also see that the shadow text is bigger than the text itself.

Although there is no straightforward way in CSS3 to achieve this – however we can bend some css rules to achieve the desired effect.

To start with, the basic ide is to create multiple text shadows each offset from the previous one by a few pixels so that it hides the previous layer.

body{
  background: #000;
  /* Center Text on Screen */
  display: grid;
  place-items:center;
  height: 100vh;
}

h1{
  color: white;
  font-size: 5rem;
  transform: translateX(-50%);
  font-family: sans-serif;
} 

h1::before{
  content: attr(data-text);
  position: relative;
  top: -0.15em;
  right: -88.75%;
  font-size: 1.6em;
  -webkit-text-stroke: 2px grey;
  -webkit-text-fill-color: transparent;
  z-index: -1;
}
<h1 data-text="Build.">Build.</h1>

However, since the text shadow also needs to be greater in size to the text itself:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

main {
  min-height: 100vh;
  background: var(--background);
  color: var(--body);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.outline-effect {
  font-size: 4rem;
  position: relative;
  font-weight: 900;
}

.outline-effect::before {
  font-size: 150%;
  content: attr(data-outline);
  position: absolute;
  top: -0.333em;
  left: 1em;
  color: var(--background);
  text-shadow: 1px 0 0 var(--outline), 0 1px 0 var(--outline), -1px 0 0 var(--outline), 0 -1px 0 var(--outline);
  z-index: -1;
  font-weight: 200;
}

<main>
  <p class="outline-effect" data-outline="Build">Build.</p>
</main>