How to Create Shock Wave or Explosion Effect using HTML and CSS?

The shock wave effect is also known as the explosion effect. It is one of the simple CSS effects. For a beginner, it is one of the best examples to learn the concept of pseudo-elements. The pseudo-element that we are using is hover. First, try to create from own before jumping into the code to understand it better. For the brief, hover is used to applying styles to an element when the mouse hovers over it.

HTML Code

By using HTML, we will create a normal structure where we use the explosion or shock wave effect.

CSS Code

The first step is to aligning our div to the center of the page using flexbox, then we have to create a circle using border-radius property. We have increased the value of it's offset at every step. Then we will use a transition duration to the div. Now use hover selector and copy and paste the box-shadow property which we used earlier and increased it's offset value. We have increased its value so that on hover it feels like coming out of the center(explosion effect). You can play with the color of the box-shadow to have a different or even multiple color explosion.

Complete Code

In this section we will combine the above two sections of code to achieve the mentioned task.

Output: