<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;
}