Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tinyCSStip</span></a> (<a href="https://mastodon.social/tags/gotcha" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gotcha</span></a>)</p><p>`text-shadow` is drawn relative to original unstroked text. So if you set a `text-shadow` and also a thicker text stroke (supported cross-browser for years now with the `-webkit-` prefix <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/CSS/-webkit-text-stroke</span></a>), the shadow gets drawn *under* the stroke.</p><p>To get a visible shadow relative to the stroked text, use `filter: drop-shadow()` <a href="https://mastodon.social/@anatudor/111325570560270740" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1113</span><span class="invisible">25570560270740</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/shadow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>shadow</span></a> <a href="https://mastodon.social/tags/cssShadow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssShadow</span></a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>typography</span></a> <a href="https://mastodon.social/tags/textEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>textEffect</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>