CSS Rain and lightning effect

Last Updated : 09 Jan, 2023

To generate the rain and lightning effect, we will make use of CSS animations that allow animation of HTML elements.

We will use @keyframes that allow the animation to gradually change from the current style to the new style at certain times then we will use the filter:hue-rotate() to give the lightning effect.

Add a background image in the section.
To generate the rain effect add a background image of rain to the same section using section:before property of CSS.
We will create an animation for a lightning effect named color-change for 10s and infinite time.
To create a color-change animation we will use @keyframes and give the effect using property filter:hue-rotate(deg).
To create a rain effect again we will use the @keyframes property and change the position of the background image for some interval.

Example:

html

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            /*adding background to section
          and animation named color-change*/
            section {
                position: relative;
                width: 100%;
                height: 100vh;
                background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20200828184536/download-200x200.png);
                background-size: cover;
                background-position: center;
                animation: color-change 10s linear infinite;
                animation-delay: 1s;
            }
            /*adding rain img and making opacity 0*/
            section:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);
                animation: rain 0.4s linear infinite;
                opacity: 0;
            }
            /* just changing the position of image 
          of rain using keyframes*/
            @keyframes rain {
                0% {
                    background-position: 0 0;
                    opacity: 1;
                }
 
                100% {
                    background-position: 8% 80%;
                    opacity: 1;
                }
            }
            /* applying filter at different angle
          on different interval using keyframe*/
            @keyframes color-change {
                0% {
                    filter: hue-rotate(0deg);
                }
                50% {
                    filter: hue-rotate(0deg);
                }
                100% {
                    filter: hue-rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <section></section>
    </body>
</html>