Colorful firework explosions with radiating particles. Perfect for celebrations, success messages, or adding excitement to your interface.
<div class="firework"></div>.firework {
width: 4px;
height: 4px;
border-radius: 50%;
position: relative;
animation: fireworkLaunch 2s ease-out infinite;
}
.firework::before,
.firework::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
box-shadow:
0 0 10px 2px #ff6b6b,
0 0 20px 4px #4ecdc4,
0 0 30px 6px #ffe66d,
0 0 40px 8px #a8e6cf;
}
@keyframes fireworkLaunch {
0% {
transform: translateY(0) scale(0);
opacity: 1;
}
50% {
transform: translateY(-100px) scale(1);
opacity: 1;
}
100% {
transform: translateY(-100px) scale(3);
opacity: 0;
}
}