<main>
      <h1>Faking an inner text shadow</h1>
      <h2 class="text-inner-shadow">INNER.</h2>
      <pre><code class="lang-css">.text-inner-shadow {
  background-color: black;
  color: transparent;
  text-shadow: 0px 2px 3px lightgrey;
  -webkit-background-clip: text;
  background-clip: text;
}</code></pre>
      <p>This is an unusual hack to get an inner text shadow.</p>
      <p>
        The first part is to set a transparent <code>color</code> and choose a
        solid <code>background-color</code> for the text. This way we see the
        background color as the text color.
      </p>
      <p>
        A <code>text-shadow</code> sits above the background. So, if you add a
        <code>text-shadow</code>, it covers the entire background of the text.
        If we add a text shadow with a small Y offset, we create a small gap
        where some of the background is shown. This gap becomes our "inner
        shadow" (this is black in this example) and the text-shadow becomes the
        "text color" (lightgrey in this example).
      </p>
      <p>
        A knock-on effect is that the a small portion
        <code>text-shadow</code> overflows the text. By applying
        <code>background-clip: text;</code>, we can clip anything that overflows
        the bounds of the text. We must use the unofficial
        <a href="https://caniuse.com/background-img-opts"
          ><code>-webkit-background-clip</code></a
        >, which is what Firefox, Chrome and Safari support.
      </p>
      <p>
        You need to choose your colours wisely when using this method because
        the colours will blend together if the text shadow has some
        transparency.
      </p>
      <p>
        For example, if you set <code>background-color: red;</code> and use a
        semi-transparent blue for the <code>text-shadow</code>, then you see
        that the majority of the text looks purple. You can see the result of
        this below.
      </p>
      <pre><code class="lang-css">.text-inner-shadow {
	background-color: red;
	color: transparent;
	text-shadow: 0px 2px 3px rgba(0, 0, 255, 0.5);
}</code></pre>
      <img
        src="https://cdn.imgpaste.net/2021/01/15/UP3Ub.png"
        alt="blue shadow with red background color on text blends to creat purple innner section"
      />
    </main>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap");

main {
  width: calc(100% - 10px);
  margin: 0 auto;
  max-width: 800px;
  font-size: calc(1rem + 0.25vw);
  font-family: Roboto, Georgia, Times, serif;
}

h1,
h2,
h3,
figcaption {
  text-align: center;
}

pre[class*="language-"] {
  margin: 0;
}

.text-inner-shadow {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 4rem;
  background-color: black;
  color: transparent;
  text-shadow: 0px 2px 3px lightgrey;
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
}

img {
  width: 100%;
  max-width: 665px;
}