Create a Serene Light Effect with CSS

A Serene CSS Dappled Light Effect

Looking to add a unique touch to your website’s design? Look no further than the serene dappled light effect! With only a few lines of CSS code, you can create a mesmerizing light effect that will definitely draw your visitors’ attention.

The dappled effect is created using two elements: a div with the effect applied, and a pseudo element within the div. We’ll use linear-gradient to create the effect itself, and position to move the pseudo element around the div.

Creating the Effect

First, we’ll create a container for the effect. Let’s give it a class name of “dapple” and apply some basic styling:

  .dapple {
    width: 400px;
    height: 200px;
    background-color: #ccc;
    position: relative;
  }

Next, we’ll add the linear-gradient property. This is what actually produces the light effect. We’ll stack two colors on top of each other, with the lighter color at the top and the darker color at the bottom.

  .dapple {
    width: 400px;
    height: 200px;
    background-color: #ccc;
    position: relative;
    background: linear-gradient(#eee, #777);
  }

Finally, we’ll add the pseudo element that will move around the div. We’ll use the before selector and add the position and animation properties.

  .dapple:before {
    content: “”;
    position: absolute;
    animation: animate 8s infinite;
  }

Now we just need to define the animation. We’ll use keyframes to make the light move around the div in a circular motion.

  @keyframes animate {
    0% {
      top: 0;
      left: 0;
    }
    100% {
      top: 50%;
      left: 100%;
    }
  }

And that’s it! With just a few lines of code, you’ve created a unique and beautiful effect that will bring life to any website.