How to create shock wave or explosion effect using HTML and CSS ?

Last Updated : 27 Apr, 2020

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. I recommend you to go through it before jumping into the code to understand it better. For the briefing, 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.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" /> 
    <title>Document</title> 
</head> 
  
<body> 
    <div class="geeks"></div> 
</body> 
  
</html>                     

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.

<style>  
    body { 
        margin: 0; 
        padding: 0; 
        background: black; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        height: 100vh; 
    } 
  
    .geeks { 
        width: 20px; 
        height: 20px; 
        background: green; 
        border-radius: 50%; 
        box-shadow: 0 0 20px rgb(127, 153, 127),  
                    0 0 40px rgb(127, 153, 127),  
                    0 0 60px rgb(127, 153, 127),  
                    0 0 80px rgb(127, 153, 127), 
                    0 0 120px rgb(127, 153, 127),  
                    0 0 220px rgb(127, 153, 127), 
                    0 0 320px rgb(127, 153, 127); 
        transition: 2s; 
    } 
  
    .geeks:hover { 
        box-shadow: 0 0 0 30px rgb(83, 224, 83),  
                    0 0 0 60px rgb(83, 224, 83), 
                    0 0 0 100px rgb(83, 224, 83), 
                    0 0 0 120px rgb(82, 226, 82),  
                    0 0 0 200px rgb(37, 214, 37),  
                    0 0 0 400px rgb(27, 165, 27),  
                    0 0 0 450px rgb(63, 235, 63); 
    } 
</style> 

Final solution: In this section we will combine the above two sections together to achieve the mentioned task.

Program:

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <title>Document</title> 
    <style> 
        body { 
            margin: 0; 
            padding: 0; 
            background: black; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
        } 
          
        .geeks { 
            width: 20px; 
            height: 20px; 
            background: green; 
            border-radius: 50%; 
            box-shadow: 0 0 20px rgb(127, 153, 127), 
                        0 0 40px rgb(127, 153, 127),  
                        0 0 60px rgb(127, 153, 127),  
                        0 0 80px rgb(127, 153, 127),  
                        0 0 120px rgb(127, 153, 127), 
                        0 0 220px rgb(127, 153, 127), 
                        0 0 320px rgb(127, 153, 127); 
            transition: 2s; 
        } 
          
        .geeks:hover { 
            box-shadow: 0 0 0 30px rgb(83, 224, 83),  
                        0 0 0 60px rgb(83, 224, 83), 
                        0 0 0 100px rgb(83, 224, 83), 
                        0 0 0 120px rgb(82, 226, 82),  
                        0 0 0 200px rgb(37, 214, 37), 
                        0 0 0 400px rgb(27, 165, 27),  
                        0 0 0 450px rgb(63, 235, 63); 
        } 
    </style> 
</head> 
  
<body> 
    <div class="geeks"></div> 
</body> 
  
</html> 