<html xmlns="http://www.w3.org/1999/xhtml">
<body style="margin: 0px">
<style>
div, text {
font-family: Arial;
font-size: 50px;
}
text, tspan {
alignment-baseline: hanging;
}
div.shadow, text.shadow {
text-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
, hsla(60, 100%, 50%, 1) -8px 14px 2px
, hsla(100, 100%, 50%, 1) -21px -12px 5px;
}
</style>
<p>The first two texts should look identical, as there is no shadow applied.</p>
<div style="position: absolute; left: 20px;">
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
<span>casts multiple</span>
shadows
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="100" style="margin-top: 50px;">
<text x="20" y="30">
<tspan fill="white" fill-opacity="0" stroke-width="1px" stroke="black">This</tspan>
<tspan fill="white" stroke-width="1px" stroke="black">text</tspan>
<tspan>casts multiple</tspan>
shadows
</text>
</svg>
<p>The next two texts have subtle differences, as the stroke/fill is painted seperated in SVG.</p>
<div class="shadow" style="position: absolute; left: 20px;">
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
<span>casts multiple</span>
shadows
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="100" style="margin-top: 50px;">
<text class="shadow" x="20" y="30">
<tspan fill="white" fill-opacity="0" stroke-width="1px" stroke="black">This</tspan>
<tspan fill="white" stroke-width="1px" stroke="black">text</tspan>
<tspan>casts multiple</tspan>
shadows
</text>
</svg>
</body>
</html>
Codebase Browser
chromium