Donation  Momo Buy me a coffee!

How To Make 6 Awesome CSS Particle Effects In Blogger

Tutorial To Make 6 Awesome CSS Particle Effects In Blogger
Tutorial To Make 6 Awesome CSS Particle Effects In Blogger

Welcome to SoiPro. This post will learn how to make 6 awesome CSS particle effects in Blogger, free particle effects, particle effects in text. Just follow our steps carefully to avoid any errors.


This is the second part of our tutorial series on CSS Particle Effects in Blogger. In this article, we will be making a simple free particle effect similar to the cloud that you see in the title image of this post.

The first part of this tutorial is about "How To Make Particle Button In Blogger". This tutorial will cover making a simple cloud-like effect for Blogger using CSS and Javascript.

If you use CSS Animations in your blog or web pages, you can find this article useful. If it’s something you have been trying and making a great effort, then I am sure that you will find this article useful.

There are 6 amazing CSS particle effects in this article that you can use on your blog or website to make it look more appealing to your readers.

  1. The “Bubbles” Effects
  2. The “Confetti” Effects
  3. The “Hearts” Effects
  4. The “Fire” Effects
  5. The “Lines” Effects
  6. The “Beams?” Effects

What Are CSS Particle Effects?

Particle Effects are a way for web designers to use CSS to create visually appealing effects that can move or change in size or direction. CSS Particle Effects are often used in backgrounds and headers, but they can be applied to any element — from text boxes, buttons, and links, to forms and sophisticated graphics like artwork.

Particle effects are such that each particle is flying upwards in its own direction. And then they spread out. Some even come back down, as you can see in the “confetti” effect.

Benefits Of Using CSS Particle Effects

Particle effects are a type of animation that uses CSS or JavaScript to create random and realistic-looking effects.

CSS Particle effects make a website look more futuristic and futuristic-looking, making the user scroll deeper into the site with each visit. This is an easy way of getting your users to keep coming back endlessly.

CSS Particle Effects are easy to use and powerful for creating something more than just animations. If you have experience using CSS, you’ll know that sometimes it makes sense to use CSS code to do something new and exciting.

How To Make CSS Particle Effects In Blogger

CSS Particle Effects can create many different effects such as bubbles, confetti, hearts, Fire, and more. We can use CSS to create particle effects on your website. We need to copy and paste some codes.

To make CSS particle effects for your blogger site, you need to add HTML, CSS, and JavaScript codes for it. These codes have to add in 3 steps. We will add HTML code in the 1st step, CSS in 2nd, and JavaScript in the last step.

Step 1 - Adding HTML (Particle Effect HTML)

Change The highlighted HTML according to your requirement, For Example:- Bubbles, Confetti, Lines, etc.

<div class="textcontainer">
<span class="particletext bubbles">Bubbles</span>
<div class="textcontainer">
<span class="particletext confetti">Confetti</span>
<div class="textcontainer">
<span class="particletext hearts">Hearts</span>
<div class="textcontainer">
<span class="particletext fire">Fire</span>
<div class="textcontainer">
<span class="particletext lines">Lines</span>
<div class="textcontainer">
<span class="particletext sunbeams">Beams?</span>

Step 2 - Adding CSS Particle Effects

These CSS Codes are in a Compressed format. If you want to beautify, you can use our tool by Following this Link – CSS Beautifier Tool.

Pick any of these CSS for effetcs listed below highlighted with a different colour, For Example, body .particletext.bubbles>, body .particletext.confetti>, etc. With there Keyframes.

<style type="text/css">
body{padding:40px 0;font-family:"bebas",sans-serif;background-color:#fff;}body .textcontainer{padding:60px 0;text-align:center;}body .particletext{text-align:center;font-size:48px;position:relative;}

body .particletext.bubbles>.particle{opacity:0;position:absolute;background-color:rgba(33,150,243,0.5);-webkit-animation:bubbles 3s ease-in infinite;animation:bubbles 3s ease-in infinite;border-radius:100%;}
@-webkit-keyframes bubbles{0%{opacity:0;}20%{opacity:1;transform:translate(0,-20%);}100%{opacity:0;transform:translate(0,-1000%);}}@keyframes bubbles{0%{opacity:0;}20%{opacity:1;transform:translate(0,-20%);}100%{opacity:0;transform:translate(0,-1000%);}}

body .particletext.confetti>.particle{opacity:0;position:absolute;-webkit-animation:confetti 3s ease-in infinite;animation:confetti 3s ease-in infinite;}body .particletext.confetti>.particle.c1{background-color:rgba(76,175,80,0.5);}body .particletext.confetti>.particle.c2{background-color:rgba(156,39,176,0.5);}
@-webkit-keyframes confetti{0%{opacity:0;transform:translateY(0%) rotate(0deg);}10%{opacity:1;}35%{transform:translateY(-800%) rotate(270deg);}80%{opacity:1;}100%{opacity:0;transform:translateY(2000%) rotate(1440deg);}}@keyframes confetti{0%{opacity:0;transform:translateY(0%) rotate(0deg);}10%{opacity:1;}35%{transform:translateY(-800%) rotate(270deg);}80%{opacity:1;}100%{opacity:0;transform:translateY(2000%) rotate(1440deg);}}

body .particletext.hearts>.particle{opacity:0;position:absolute;background-color:#cc2a5d;-webkit-animation:hearts 3s ease-in infinite;animation:hearts 3s ease-in infinite;}body .particletext.hearts>.particle:before,body .particletext.hearts>.particle:after{position:absolute;content:"";border-radius:100px;top:0px;left:0px;width:100%;height:100%;background-color:#cc2a5d;}body .particletext.hearts>.particle:before{transform:translateX(-50%);}body .particletext.hearts>.particle:after{transform:translateY(-50%);}
@-webkit-keyframes hearts{0%{opacity:0;transform:translate(0,0%) rotate(45deg);}20%{opacity:0.8;transform:translate(0,-20%) rotate(45deg);}100%{opacity:0;transform:translate(0,-1000%) rotate(45deg);}}@keyframes hearts{0%{opacity:0;transform:translate(0,0%) rotate(45deg);}20%{opacity:0.8;transform:translate(0,-20%) rotate(45deg);}100%{opacity:0;transform:translate(0,-1000%) rotate(45deg);}}

<!-- FIRE EFFECT -->
body>.particle{position:absolute;background-color:rgba(255,193,7,0.5);border-radius:40px;border-top-right-radius:0px;-webkit-animation:fires 0.8s linear infinite;animation:fires 0.8s linear infinite;transform:rotate(-45deg);opacity:0;}body>.particle:before{position:absolute;content:"";top:60%;left:40%;transform:translate(-50%,-50%);width:50%;height:50%;border-radius:40px;border-top-right-radius:0px;background-color:rgba(251,140,0,0.5);}
@-webkit-keyframes fires{0%{transform:rotate(-70deg) translateY(0%);}25%{transform:rotate(-20deg) translateY(-5%);opacity:1;}50%{transform:rotate(-70deg) translateY(-10%);}75%{transform:rotate(-20deg) translateY(-20%);}100%{transform:rotate(-70deg) translateY(-40%);opacity:1;}}@keyframes fires{0%{transform:rotate(-70deg) translateY(0%);}25%{transform:rotate(-20deg) translateY(-5%);opacity:1;}50%{transform:rotate(-70deg) translateY(-10%);}75%{transform:rotate(-20deg) translateY(-20%);}100%{transform:rotate(-70deg) translateY(-40%);opacity:1;}}

body .particletext.lines>.particle{position:absolute;background-color:rgba(244,67,54,0.5);-webkit-animation:lines 3s linear infinite;animation:lines 3s linear infinite;}
@-webkit-keyframes lines{0%,50%,100%{transform:translateY(0%);}25%{transform:translateY(100%);}75%{transform:translateY(-100%);}}@keyframes lines{0%,50%,100%{transform:translateY(0%);}25%{transform:translateY(100%);}75%{transform:translateY(-100%);}}

body .particletext.sunbeams>.particle{position:absolute;background-color:rgba(253,216,53,0.5);-webkit-animation:sunbeams 3s linear infinite;animation:sunbeams 3s linear infinite;}
@-webkit-keyframes sunbeams{0%{transform:translateY(40%) rotate(0deg);}50%{transform:translateY(-40%) rotate(180deg);}100%{transform:translateY(40%) rotate(360deg);}0%,14%,17%,43%,53%,71%,80%,94%,100%{opacity:0;}6%,15%,24%,28%,48%,55%,78%,82%,99%{opacity:1;}}@keyframes sunbeams{0%{transform:translateY(40%) rotate(0deg);}50%{transform:translateY(-40%) rotate(180deg);}100%{transform:translateY(40%) rotate(360deg);}0%,14%,17%,43%,53%,71%,80%,94%,100%{opacity:0;}6%,15%,24%,28%,48%,55%,78%,82%,99%{opacity:1;}}


Step 3 - Adding JavaScript (Particle Effect JS)

These JavaScript codes are in a compressed format. If you want to beautify, you can use our tool by Following this Link – JavaScript Beautifier Tool.

Pick any of these Javascript for effetcs listed below highlighted with a different colour, For Example, function confetti(), function hearts(), etc.

<script src=''></script>
function initparticles() {bubbles();hearts();lines();confetti();fire();sunbeams();}

function bubbles(){$.each($(".particletext.bubbles"),function(){for(var t=$(this).width()/50*10,n=0;n<=t;n++){var a=$.rnd(40,80)/10;$(this).append('<span class="particle" style="top:'+$.rnd(20,80)+"%; left:"+$.rnd(0,95)+"%;width:"+a+"px; height:"+a+"px;animation-delay: "+$.rnd(0,30)/10+'s;"></span>')}})}

function confetti(){$.each($(".particletext.confetti"),function(){for(var t=$(this).width()/50*10,n=0;n<=t;n++)$(this).append('<span class="particle c'+$.rnd(1,2)+'" style="top:'+$.rnd(10,50)+"%; left:"+$.rnd(0,100)+"%;width:"+$.rnd(6,8)+"px; height:"+$.rnd(3,4)+"px;animation-delay: "+$.rnd(0,30)/10+'s;"></span>')})}

function hearts(){$.each($(".particletext.hearts"),function(){for(var t=$(this).width()/50*5,a=0;a<=t;a++){var n=$.rnd(60,120)/10;$(this).append('<span class="particle" style="top:'+$.rnd(20,80)+"%; left:"+$.rnd(0,95)+"%;width:"+n+"px; height:"+n+"px;animation-delay: "+$.rnd(0,30)/10+'s;"></span>')}})}

<!-- FIRE EFFECT -->
function fire(){$.each($(""),function(){for(var t=$(this).width()/50*20,i=0;i<=t;i++){var n=$.rnd(8,12);$(this).append('<span class="particle" style="top:'+$.rnd(40,70)+"%; left:"+$.rnd(-10,100)+"%;width:"+n+"px; height:"+n+"px;animation-delay: "+$.rnd(0,20)/10+'s;"></span>')}})}

function lines(){$.each($(".particletext.lines"),function(){for(var n=$(this).width()/50*10,t=0;t<=n;t++)$(this).append('<span class="particle" style="top:'+$.rnd(-30,30)+"%; left:"+$.rnd(-10,110)+"%;width:"+$.rnd(1,3)+"px; height:"+$.rnd(20,80)+"%;animation-delay: -"+$.rnd(0,30)/10+'s;"></span>')})}

function sunbeams(){$.each($(".particletext.sunbeams"),function(){for(var n=$(this).width()/50*10,t=0;t<=n;t++)$(this).append('<span class="particle" style="top:'+$.rnd(-50,0)+"%; left:"+$.rnd(0,100)+"%;width:"+$.rnd(1,3)+"px; height:"+$.rnd(80,160)+"%;animation-delay: -"+$.rnd(0,30)/10+'s;"></span>')})}

jQuery.rnd=function(r,n){return r=parseInt(r),n=parseInt(n),Math.floor(Math.random()*(n-r+1))+r};



A particle effect is a technique that simulates the appearance of particles, including bubbles, hearts, or fire, etc. Particle effects produce realistic and visually pleasing effects on web pages. Often they are used as graphics in web applications.

CSS Particle effects are commonly created by using CSS and JavaScript. Particles can be any shape, color, size, or combination. They can even be animated (like in the image above).

The effect is made possible by using CSS to specify the desired characteristics of the particles and create a CSS class for them (like in this tutorial). You can make different particle effects by combining different classes or modifying the properties of the classes in CSS.

We hope that this post helped you make CSS particle effects on your blogger website. Do let us know if you have any other questions regarding particle effects. Feel free to contact us via our contact form or telegram.

About the Author

Hello this is NVH Corp, I am Web Designer and Expert at SoiPro(dot)Com

Đăng nhận xét

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.