How to make a pulse effect

In this article, I'll teach you how to make a pulse effect on an image.

HTML Code

First, we add our image inside <img> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulse Effect</title>
</head>
<body>

    <img class="moonPulse" src="https://i.pinimg.com/564x/a1/01/e2/a101e22fc458c1110d418ee309f240c8.jpg"
alt="moon pic"/>

</body>
</html>

CSS Code

Styling the body

body{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5em;
    background: #000;
}

Styling the image

.moonPulse{
    animation: pulse 1s infinite;
    border-radius: 50%;
    width: 20em;
}

Finally, adding pulse effect animation

@keyframes pulse{
      from{
        box-shadow: 0 0 0 0 rgba(198, 182, 179, 0.85);
      }

      to{
        box-shadow: 0 0 0 30px rgba(201, 48, 48, 0);
      }
  }

Final Result

I hope you find this tutorial useful. See you on the next article.
Here's the Source Code on GitHub
Here's the YouTube Video where I code it from scratch.
Check it out on CodePen

Follow me on