{"id":360899,"date":"2022-01-19T14:46:39","date_gmt":"2022-01-19T22:46:39","guid":{"rendered":"https:\/\/css-tricks.com\/?p=360899"},"modified":"2022-01-19T14:46:41","modified_gmt":"2022-01-19T22:46:41","slug":"css-dappled-light-effect","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-dappled-light-effect\/","title":{"rendered":"A Serene CSS Dappled Light Effect"},"content":{"rendered":"\n

There\u2019s a serene warmth to the early evening sunlight peaking through rustling leaves. Artists use dappled light to create a soft, hypnotic effect.<\/p>\n\n\n\n

\"An
Bedford Dwellings<\/a> by Ron Donoughe<\/a> (2013)<\/figcaption><\/figure>\n\n\n\n

We can create the same sort of dappled light effect in web design, using it on photos and illustrations to add that magic touch to what might otherwise be drab walls of content to bring them back to life.<\/p>\n\n\n\n

I\u2019ll give you one easy, quick way to add this effect\u2026 with just CSS.<\/p>\n\n\n\n\n\n\n\n

Before we get into the code, it\u2019s important to know the composition of dappled light. It\u2019s made up of large spots \u2014 circular or elliptical \u2014 of light that are intercepted by the shadows cast by the foliage. Basically the light that slips past leaves, branches and so forth. Sometimes the shadows create crisp edges, but are more often blurred since we\u2019re talking about light that passes though many, less defined spaces that diffuse and distort the light as it casts shadows from a further distance than, say, your own stark shadow on a nearby wall from direct sunlight.<\/p>\n\n\n\n

Here\u2019s the difference in the appearance of a white wall with and without lit by dappled light:<\/p>\n\n\n\n

\"A
The effect creates splashes of light and shadow.<\/figcaption><\/figure>\n\n\n\n

I\u2019m going to recreate the dappled light effect with both plain text and fun emojis, applying CSS shadows and blends to mimic nature. I\u2019ll cover alternative methods too.<\/p>\n\n\n

Setting the scene<\/h3>\n\n\n

We\u2019ll use text \u2014 letters from the alphabet, special characters, emojis, etc. \u2014 to create the shapes of light. And by light, I mean pale, translucent colors. Again, we\u2019re for a dappled light effect rather than something that\u2019s sharp, crisp, or stark.<\/p>\n\n\n\n

It\u2019s best to choose characters that are elliptical or oblong in some way \u2014 the spots produced by dappled light comes in a variety of shapes. You\u2019ll have to go with your best judgement here to get exactly what you\u2019re going for. Me? I\u2019m using 🍃, 🍂, \\<\/code> because they are elliptical, oblong, and slanted \u2014 a bit of chaos and unpredictability for an otherwise serene effect.<\/p>\n\n\n\n

I\u2019m wrapping those in paragraphs that are contained in a .backdrop<\/code> parent element:<\/p>\n\n\n\n

<div class=\"backdrop\">\n  <p class=\"shapes\">🍃<\/p>\n  <p class=\"shapes\">🍂<\/p>\n  <p class=\"shapes\">\\<\/p>\n<\/div><\/code><\/pre>\n\n\n\n
I\u2019m using the parent element as the surface where the dappled light and shadows are cast, applying a background image for its texture. And not only am I giving the surface an explicit width<\/code> and height<\/code>, but also setting hidden overflow on it so I\u2019m able to cast shadows that go beyond the surface without revealing them. The objects that cast the dappled light effect are aligned in the middle of the backdrop\u2019s surface, thanks to CSS grid:<\/p>\n\n\n\n
.backdrop {\n  background: center \/ cover no-repeat url('image.jpeg');\n  width: 400px; height: 240px;\n  overflow: hidden;\n  display: grid;\n}\n.backdrop > * {\n  grid-area: 1\/1;\n}<\/code><\/pre>\n\n\n\n
I find that it\u2019s OK if the shapes aren\u2019t aligned exactly<\/em> on top of one another as long as they overlap in a way that gets the dappled light effect you want. So no pressure to do exactly what I\u2019m doing here to position things in CSS. In fact, I encourage you to try playing with the values to get different patterns of dappled light!<\/p>\n\n\n
Styling the dappled light in CSS<\/h3>\n\n\n
These are the key properties the emojis should have \u2014 transparent<\/code> color, black semi-transparent background (using the alpha channel in rgba()<\/code>), blurry white text-shadow<\/code> with a nice large font-size<\/code>, and finally, a mix-blend-mode<\/code><\/a> to smooth things out.<\/p>\n\n\n\n
.shapes {\n  color:  transparent;\n  background-color: rgba(0, 0, 0, 0.3); \/\/ Use alpha transparency\n  text-shadow: 0 0 40px #fff; \/\/ Blurry white shadow\n  font: bolder 320pt\/320pt monospace;\n  mix-blend-mode: multiply;\n}<\/code><\/pre>\n\n\n\n