FConfetti Create CSS confetti, both css and js files are required

FConfetti.css

/**
 *  FConfetti
 *  Create CSS confetti
 *
 *  Ken Frederick
 *  [email protected]
 *
 *  http://kennethfrederick.de/
 *  http://blog.kennethfrederick.de/
 *
 */


#FConfetti-container,
#FConfetti {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;

    pointer-events: none;

    transition-property: opacity;
    transition-duration: 500ms;
}

.FConfetti-container {
    z-index: 1000;
}

.FConfetti-container .confetto-container {
    position: absolute;
    /* change the sizes here */
    width: 9px;
    height: 9px;

    mix-blend-mode: overlay;

    animation: FConfetti-fall 5000ms linear infinite;
}

.FConfetti-container .confetto-container .confetto {
    width: inherit;
    height: inherit;

    animation: FConfetti-spin 5000ms linear infinite;
}
.FConfetti-container .confetto-container .confetto.circle {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}



@-webkit-keyframes 'FConfetti-spin' {
    0% {
        transform: rotate3d(1, 1, 1, 45deg);
    }
    100% {
        transform: rotate3d(1, 1, 1, 1845deg);
    }
}

@-webkit-keyframes 'FConfetti-fall' {
    0%   {
        transform: translate(1vw, -20vh);
    }
    10% {
        transform: translate(-2vw, -7vh);
    }
    20% {
        transform: translate(3vw, 6vh);
    }
    30% {
        transform: translate(-3vw, 19vh);
    }
    40% {
        transform: translate(1vw, 32vh);
    }
    50% {
        transform: translate(-2vw, 45vh);
    }
    60% {
        transform: translate(2vw, 58vh);
    }
    70% {
        transform: translate(-3vw, 71vh);
    }
    80% {
        transform: translate(0vw, 84vh);
    }
    90% {
        transform: translate(-1vw, 97vh);
    }
    100%   {
        transform: translate(0, 120vh);
    }
}

FConfetti.js

/**
 *  FConfetti
 *  Create CSS confetti
 *
 *  Ken Frederick
 *  [email protected]
 *
 *  http://kennethfrederick.de/
 *  http://blog.kennethfrederick.de/
 *
 */


/**
 * @class FConfetti
 *
 * @param container
 * @param properties
 *
 */
class FConfetti {
    // ------------------------------------------------------------------------
    //
    // Constructor
    //
    // ------------------------------------------------------------------------
    constructor(container=document.getElementById('FConfetti'), properties={}) {
        this.container = container;
        this.container.classList.add('FConfetti-container');

        this.properties = this.combine({
            shape       : ['circle', 'square'],
            colors      : ['rgba(255, 0, 0, 0.7)', 'rgba(255, 200, 0, 0.7)', 'rgba(0, 0, 255, 0.7)'],
            total       : 35,
            random      : true,
            startOnInit : false
        }, properties);

        this.clearTimer = null;

        if (this.properties.startOnInit) {
            this.start();
        }
    }


    // ------------------------------------------------------------------------
    //
    // Methods
    //
    // ------------------------------------------------------------------------
    start() {
        this.container.innerHTML = '';

        let confettoContainer;
        let confetto;
        let i = 0;
        let shape;
        let color;
        for (; i < this.properties.total; i++) {
            shape = (this.properties.random)
                ? this.properties.shape[parseInt(Math.random() * this.properties.shape.length)]
                : this.properties.shape[0];
            // color = '#' + Math.floor(Math.random() * 16777215).toString(16);
            color = (this.properties.random)
                ? this.properties.colors[parseInt(Math.random() * this.properties.colors.length)]
                : this.properties.colors[0];

            confettoContainer = document.createElement('div');
            confettoContainer.classList.add('confetto-container');
            confettoContainer.style.top = '-20px'; //`${Math.random() * window.innerHeight}px`;
            confettoContainer.style.left = `${Math.random() * window.innerWidth}px`;
            confettoContainer.style.animationDuration = `${2250 + (Math.random() * 7500)}ms`;

            confetto = document.createElement('div');
            confetto.classList.add('confetto', shape);
            confetto.style.backgroundColor = color;
            confetto.style.animationDuration = `${2000 + (Math.random() * 2000)}ms`;

            confettoContainer.appendChild(confetto);
            this.container.appendChild(confettoContainer);
        }
    }

    // ------------------------------------------------------------------------
    stop() {
        // clear out after timer to match
        // transition-duration of #FConfetti
        this.clearTimer = window.setTimeout(() => {
            this.container.innerHTML = '';
            window.clearTimeout(this.clearTimer);
        }, 500);
    }

    // ------------------------------------------------------------------------
    combine(base, arr) {
        for (var item in base) {
            arr[item] = (arr[item] !== undefined)
                ? arr[item]
                : base[item];
        }
        return arr;
    }
}

Example implementation

<!doctype html>
    <head>
        <title>FConfetti</title>

        <link href="./FConfetti.css" rel="stylesheet" type="text/css" />
        <style>
            body, html {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="FConfetti"></div>

        <script type="text/javascript" src="./FConfetti.js"></script>
        <script type="text/javascript">
            let confetti = new FConfetti(undefined, {
                startOnInit : true
            });
        </script>

    </body>
</html>