Welcome to ThemesGadget. 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.
Introduction
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.
- The “Bubbles” Effects
- The “Confetti” Effects
- The “Hearts” Effects
- The “Fire” Effects
- The “Lines” Effects
- 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>
<div class="textcontainer">
<span class="particletext confetti">Confetti</span>
</div>
<div class="textcontainer">
<span class="particletext hearts">Hearts</span>
</div>
<div class="textcontainer">
<span class="particletext fire">Fire</span>
</div>
<div class="textcontainer">
<span class="particletext lines">Lines</span>
</div>
<div class="textcontainer">
<span class="particletext sunbeams">Beams?</span>
</div>
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;}
<!-- BUBBLES EFFECT -->
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%);}}
<!-- CONFETTI EFFECT -->
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);}}
<!-- HEARTS EFFECT -->
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 .particletext.fire>.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 .particletext.fire>.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;}}
<!-- LINES EFFECT -->
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%);}}
<!-- SUNBEAMS EFFECT -->
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;}}
</style>
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='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script>
function initparticles() {bubbles();hearts();lines();confetti();fire();sunbeams();}
<!-- BUBBLES EFFECT -->
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>')}})}
<!-- CONFETTI EFFECT -->
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>')})}
<!-- HEARTS EFFECT -->
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($(".particletext.fire"),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>')}})}
<!-- LINES EFFECT -->
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>')})}
<!-- SUNBEAMS EFFECT -->
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};
initparticles();
</script>
Conclusion
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.