A Serene CSS Dappled Light Effect | CSS-Tricks

There is a quiet warmth in the early evening sunlight culminating in the rustle of the foliage. Artists use dim light to create a soft, hypnotic effect.

Oil painting of a tall, rectangular orange building with six windows, two by two, and in front of it a dimly placed fence full width.  There is a similar building far away.  There is a tall birch tree in the foreground with light green and yellow leaves, casting the dappled light effect covered in this article.  Shades cover the green grass between the tree and the building, extending into the building.
Bedford Dwellings by Ron Donoughe (2013)

We can create the same kind of spotted light effect in web design, and use it in photos and illustrations to add that magical touch to what might otherwise be faded walls of content to bring them back to life.

I’ll give you one quick and easy way to add this effect…using just CSS.

Before getting into the code, it is important to know the composition of the spotted light. It consists of large points – circular or oval – of light intercepted by shadows cast by foliage. Basically the light that glides through leaves, twigs, etc. Sometimes shadows create crisp edges, but often they’re blurry since we’re talking about light that goes through though many less defined areas that diffuse and distort light as it casts shadows from a distance farther than, say, your stark shadow on a wall Close to direct sunlight.

This is the difference in the look of a white wall with and without dim lighting:

Side-by-side comparison of the same white brick surface, left shows CSS spotted light effect compared to no shadows.
The effect creates patches of light and shadow.

I will recreate the soft light effect with both plain text and fun emojis, applying CSS shadows and blending them to mimic nature. I’ll cover alternative methods as well.

Scene mode

We’ll use text – letters from the alphabet, special characters, emojis, etc. – to create the shapes of light. By light, I mean pale and transparent colours. Once again, we’re in favor of a soft-light effect rather than something sharp, crisp, or glaring.

It is better to choose letters that are oval in shape or somehow rectangular – spots from dim light come in a variety of shapes. You will have to follow your best judgment here to get exactly what you want. I? I use πŸƒ , πŸ‚ , Because it’s oval, rectangular, and slanted – a bit of a mess and unpredictability for an otherwise quiet effect.

I wrap those in the paragraphs into a file .backdrop Parent element:

<div class="backdrop">
  <p class="shapes">πŸƒ</p>
  <p class="shapes">πŸ‚</p>
  <p class="shapes"></p>
</div>

I’m using the parent element as a surface where the spotted highlights and shadows are cast, with a background image applied to its texture. And I’m not just giving the surface outright width And height, but also put a hidden overflow on it so I can cast shadows beyond the surface without revealing it. Objects that cast a soft light effect are aligned in the middle of the background surface, thanks to the CSS grid:

.backdrop {
  background: center / cover no-repeat url("https://css-tricks.com/css-dappled-light-effect/image.jpeg");
  width: 400px; height: 240px;
  overflow: hidden;
  display: grid;
}
.backdrop > * {
  grid-area: 1/1;
}

I find it’s okay if the shapes aren’t aligned exactly On top of each other as long as they overlap in such a way that you get the spotted light effect you want. So there is no pressure to do exactly what I’m doing here to put things in CSS. In fact, I encourage you to try playing with the values ​​to get different patterns of spotted light!

Spotted Light Design in CSS

These are the main characteristics that emojis should have – transparent Semi-transparent black background (using alpha channel in . format rgba()), misty white text-shadow with a nice big font-size, and finally, a mix-blend-mode To make things easier.

.shapes {
  color:  transparent;
  background-color: rgba(0, 0, 0, 0.3); // Use alpha transparency
  text-shadow: 0 0 40px #fff; // Blurry white shadow
  font: bolder 320pt/320pt monospace;
  mix-blend-mode: multiply;
}

mix-blend-mode Sets how the colors of the element blend with the colors of the container element’s content. the multiply The value shows the background of the element through the light colors of the element and keeps the dark colors the same, making the light effect more beautiful and natural.

Refine color and contrast

I wanted to background-image On the background to be more bright, so I also added filter: brightness(1.6). Another way to do this is by using background-blend-mode Instead, as all the different backgrounds for an element are blended, instead of adding emojis as separate elements, we add them as background images.

Note that I used a different emoji in the last example as well floralwhite Some colors are less intense than pure white light. Here is one of the unwrapped emoji background images:

<svg xmlns="http://www.w3.org/2000/svg"> 
  <foreignObject width="400px" height="240px"> 
    <div xmlns="http://www.w3.org/1999/xhtml" style="font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);"
    >
      🌾
    </div> 
  </foreignObject> 
</svg>

If you want to use your own photos of the shapes, make sure the borders are blurred to create a soft light. CSS blur() A filter can be useful for the same kind of thing. I also used CSS @supports Sets the shadow blur value for some browsers as a backup.

Now let’s go back to the first example and add a few things:

<div class="backdrop">
  <p class="shapes">πŸƒ</p>
  <p class="shapes">πŸ‚</p>
  <p class="shapes"></p>
</div>

<p class="content">
  <img width="70px" style="float: left; margin-right: 10px;" src="https://css-tricks.com/css-dappled-light-effect/image.jpeg" alt="">
  Top ten tourists spots for the summer vacation <br><br><i style="font-weight: normal;">Here are the most popular places...</i>
</p>

.backdrop And .shapes They are basically the same patterns as before. As for the .content, which is also at the top of the file .backdrop, I added isolation: isolate Forms a new stacking context, while excluding the element from blending as an enhancement touch.

Moving the light source

I also decided to add a simple animation using CSS @keyframes that is applied to .backdrop employment :hover:

.backdrop:hover > .shapes:nth-of-type(1){
  animation: 2s ease-in-out infinite alternate move;
}
.backdrop:hover > .shapes:nth-of-type(2):hover{
  animation: 4s ease-in-out infinite alternate move-1;
}

@keyframes move {
  from {
    text-indent: -20px;
  }
  to {
    text-indent: 20px;
  }
}
@keyframes move-1 {
  from {
    text-indent: -60px;
  }
  to {
    text-indent: 40px;
  }
}

Energizing text-indent The feature on emoji products is very subtle movement – the kind you might expect from clouds moving over them that change the direction of the light. Just a touch of class, you know.

wrapping

here we are! We drew some inspiration from nature and art to mimic one of those partially cloudy days where the sun shines through the trees and shrubs, exposing the dim light and patches of shade on a rooftop. And we did it all with a small handful of CSS and a few emojis.

The key was how we applied color to emojis. Using extra blur text-shadow In a light color that adjusts the light, and semi-transparent background-color Defines shadow spots. From there, all we had to do was make sure the background highlights and shadows used a realistic texture with enough contrast to see the dappled light effect in action.

Leave a Comment