📝 CSS-Tricks 288: Dappled Light with CSS and Fluid Typography

[Robin]: Regular contributor to the blog and all-around outstanding CSS-er, Preethi, had one of those ideas that makes me wake up as if I’ve been splashed with cold water whenever I hear it: what if we made this weird thing with CSS? How would we do that? Is this real-life thing possible in HTML?

For me, it’s questions like this that make me excited about CSS.

So: “there’s a serene warmth to the early evening sunlight peaking through rustling leaves,” writes Preethi in this post before wondering if it’s possible to make a dappled sunlight effect with CSS. Well, it totally is possible! Here’s the example Preethi made:

See the background light on that wall? In Preethi’s demo, that light is moving and contorting in the background, just like real light. The remarkable thing about this demo though is how that light is made. Just take a gander at the HTML:

<div class="backdrop"> <p class="shapes">🍃</p> <p class="shapes">🍂</p> <p class="shapes">\</p> </div>

What! That’s sure neat. With those shapes, Preethi distorts the heck out of them with mix-blend-mode and the text-shadow property to make something I’ve never seen in CSS before. Because it’s folks like Preethi who ask weird questions and make even weirder experiments that eventually lead to our whole industry being pushed forward in weirder and weirder directions. Exciting!