{"id":5537,"date":"2023-12-28T15:30:00","date_gmt":"2023-12-28T15:30:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=5537"},"modified":"2023-12-28T00:58:08","modified_gmt":"2023-12-28T00:58:08","slug":"css-confetti-animations-code","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/css-confetti-animations-code\/","title":{"rendered":"20+ Free CSS confetti animations (Code+ Demo)"},"content":{"rendered":"\n<p>Hey coding enthusiasts!! Here we are back with the latest and most creative CSS confetti animation collection just by using HTML, CSS, and Javascript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS confetti examples<\/h3>\n\n\n\n<p>Whenever we want to show any interactive and creative celebration effect then Confetti is best to do that. So we explored various codepen examples and found the best collection of such CSS Confetti animations.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"598\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/image-49-1024x598.png\" alt=\"CSS confetti animations\" class=\"wp-image-5635\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/image-49-1024x598.png 1024w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/image-49-300x175.png 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/image-49-768x448.png 768w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/image-49-150x88.png 150w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/image-49.png 1175w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s get started on the journey of exploring CSS confetti animation examples:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. CSS Confetti with HTML &lt;canvas&gt;<\/h3>\n\n\n\n<p>This CSS confetti which is presented below displays a birthday celebration with a &#8220;Happy Birthday &#8221; text. It also uses&lt;canvas&gt; which is used to show animations and graphics and here it is showing the confetti from top to bottom.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Confetti with HTML `&lt;canvas&gt;`\" src=\"https:\/\/codepen.io\/jonathanbell\/embed\/preview\/OvYVYw?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/jonathanbell\/pen\/OvYVYw\" target=\"_blank\" rel=\"noopener\">\n  Confetti with HTML `&lt;canvas&gt;`<\/a> by Jonathan Bell (<a href=\"https:\/\/codepen.io\/jonathanbell\" target=\"_blank\" rel=\"noopener\">@jonathanbell<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Confetti with Background Mask <\/h3>\n\n\n\n<p>The confetti shown in the below example is very beautifully presented. It creates a very appealing background by falling off shiny particles that are created by the canvas container for the tsParticles library in the code.  <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"tsParticles - Confetti with Background Mask\" src=\"https:\/\/codepen.io\/matteobruni\/embed\/preview\/mdmqMKr?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/matteobruni\/pen\/mdmqMKr\" target=\"_blank\" rel=\"noopener\">\n  tsParticles &#8211; Confetti with Background Mask<\/a> by Matteo Bruni (<a href=\"https:\/\/codepen.io\/matteobruni\" target=\"_blank\" rel=\"noopener\">@matteobruni<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. CSS Confetti<\/h3>\n\n\n\n<p>This confetti is a very creative one with a multicolor effect. This also has a zoom-in and zoom-out effect for the confetti with text displayed.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Confetti\" src=\"https:\/\/codepen.io\/wakana-k\/embed\/preview\/gOqqWdY?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/wakana-k\/pen\/gOqqWdY\" target=\"_blank\" rel=\"noopener\">\n  Confetti<\/a> by Wakana Y.K. (<a href=\"https:\/\/codepen.io\/wakana-k\" target=\"_blank\" rel=\"noopener\">@wakana-k<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. CSS confetti button<\/h3>\n\n\n\n<p>Here in this example, we have a button which gives a beautiful confetti when the user will press that.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Import npm package from skypack.dev\" src=\"https:\/\/codepen.io\/netsi1964\/embed\/preview\/KKMxjNy?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/netsi1964\/pen\/KKMxjNy\" target=\"_blank\" rel=\"noopener\">\n  Import npm package from skypack.dev<\/a> by Sten Hougaard (<a href=\"https:\/\/codepen.io\/netsi1964\" target=\"_blank\" rel=\"noopener\">@netsi1964<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Canvas confetti<\/h3>\n\n\n\n<p>The below example creates a dynamic confetti animation. To display the party information HTML code uses div and canvas. This beautiful confetti containing different shapes is initialized by javascript.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Canvas Confetti \" src=\"https:\/\/codepen.io\/paper_matthew\/embed\/preview\/PNxrbK?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/paper_matthew\/pen\/PNxrbK\" target=\"_blank\" rel=\"noopener\">\n  Canvas Confetti <\/a> by Paper Matthew (<a href=\"https:\/\/codepen.io\/paper_matthew\" target=\"_blank\" rel=\"noopener\">@paper_matthew<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Creative confetti <\/h3>\n\n\n\n<p>This confetti has a falling animation in a rotating circle form without using Javascript to initialize it. <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"#dailySVG #Plus \u2013 Day 09 \u2013Confetti \u2013 #SVG #Animation by @mge_de\" src=\"https:\/\/codepen.io\/g12n\/embed\/preview\/ggeZNp?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/g12n\/pen\/ggeZNp\" target=\"_blank\" rel=\"noopener\">\n  #dailySVG #Plus \u2013 Day 09 \u2013Confetti \u2013 #SVG #Animation by @mge_de<\/a> by Michael Gehrmann (<a href=\"https:\/\/codepen.io\/g12n\" target=\"_blank\" rel=\"noopener\">@g12n<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Interactive confetti<\/h3>\n\n\n\n<p>This represents a very creative falling confetti which changes its color on clicking the below button .<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Interactive Confetti\" src=\"https:\/\/codepen.io\/matthewmain\/embed\/preview\/ExaWWJM?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/matthewmain\/pen\/ExaWWJM\" target=\"_blank\" rel=\"noopener\">\n  Interactive Confetti<\/a> by Matthew Main (<a href=\"https:\/\/codepen.io\/matthewmain\" target=\"_blank\" rel=\"noopener\">@matthewmain<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. Confetti (with EQCSS)<\/h3>\n\n\n\n<p>This presents a very beautiful confetti animation where EQCSS is used for dynamic effects. Javascript is responsible for the movement and appearance of confetti.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Confetti (with EQCSS)\" src=\"https:\/\/codepen.io\/tomhodgins\/embed\/preview\/ZKgGRQ?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/tomhodgins\/pen\/ZKgGRQ\" target=\"_blank\" rel=\"noopener\">\n  Confetti (with EQCSS)<\/a> by Tommy Hodgins (<a href=\"https:\/\/codepen.io\/tomhodgins\" target=\"_blank\" rel=\"noopener\">@tomhodgins<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9. Interactive confetti (Canvas + pure JS, no dependencies)<\/h3>\n\n\n\n<p>This confetti is like a sudden blossom or cracker and looks amazing HTML uses Canvas here and pure javascript is used. <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Interactive confetti (Canvas + pure JS,  no dependencies)\" src=\"https:\/\/codepen.io\/ksenia-k\/embed\/preview\/YzqzdxE?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/ksenia-k\/pen\/YzqzdxE\" target=\"_blank\" rel=\"noopener\">\n  Interactive confetti (Canvas + pure JS,  no dependencies)<\/a> by Ksenia Kondrashova (<a href=\"https:\/\/codepen.io\/ksenia-k\" target=\"_blank\" rel=\"noopener\">@ksenia-k<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">10. Start confetti animation by entering a secret code<\/h3>\n\n\n\n<p>This confetti animation is unique as here to start the confetti user has to enter a secret password and as the user enters the correct one, a beautiful confetti will occur.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"#JavaScript30 Day 12: Key Sequence Detection\" src=\"https:\/\/codepen.io\/kathykato\/embed\/preview\/rwLzvE?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/kathykato\/pen\/rwLzvE\" target=\"_blank\" rel=\"noopener\">\n  #JavaScript30 Day 12: Key Sequence Detection<\/a> by Katherine Kato (<a href=\"https:\/\/codepen.io\/kathykato\" target=\"_blank\" rel=\"noopener\">@kathykato<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">11. Congratulations confetti<\/h3>\n\n\n\n<p>This confetti shows a congratulatory text and then a lovely confetti will fall down. <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"confetti\" src=\"https:\/\/codepen.io\/websplash\/embed\/preview\/OJmjYVo?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/websplash\/pen\/OJmjYVo\" target=\"_blank\" rel=\"noopener\">\n  confetti<\/a> by Web Splash (<a href=\"https:\/\/codepen.io\/websplash\" target=\"_blank\" rel=\"noopener\">@websplash<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">12. Conffeti CSS Animation<\/h3>\n\n\n\n<p>This presents a mini confetti around the given text.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Conffeti CSS Animation\" src=\"https:\/\/codepen.io\/sublimejuan\/embed\/preview\/gOWRJRE?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/sublimejuan\/pen\/gOWRJRE\" target=\"_blank\" rel=\"noopener\">\n  Conffeti CSS Animation<\/a> by Juan Lias (<a href=\"https:\/\/codepen.io\/sublimejuan\" target=\"_blank\" rel=\"noopener\">@sublimejuan<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">13. confetti animation with javascript<\/h3>\n\n\n\n<p>The presented code below shows 3 buttons that would decide which type of confetti is to be shown. The first button will show basic confetti another shows confetti in a random direction and the last one blossoms like rainfall.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"confetti animation with javascript\" src=\"https:\/\/codepen.io\/Ranjithkumar10\/embed\/preview\/mdqeoVp?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/Ranjithkumar10\/pen\/mdqeoVp\" target=\"_blank\" rel=\"noopener\">\n  confetti animation with javascript<\/a> by Ranjith (<a href=\"https:\/\/codepen.io\/Ranjithkumar10\" target=\"_blank\" rel=\"noopener\">@Ranjithkumar10<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">14. CSS Confetti<\/h3>\n\n\n\n<p>The confetti is elegant without using Javascript. It produces confetti from the center point which is spreading all over.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS Confetti\" src=\"https:\/\/codepen.io\/stffn\/embed\/preview\/LxjzxQ?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/stffn\/pen\/LxjzxQ\" target=\"_blank\" rel=\"noopener\">\n  CSS Confetti<\/a> by Steffen J\u00f8rgensen (<a href=\"https:\/\/codepen.io\/stffn\" target=\"_blank\" rel=\"noopener\">@stffn<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">15. CSS Confetti<\/h3>\n\n\n\n<p>This confetti is made by using pure CSS and falls like rainfall. <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS Confetti\" src=\"https:\/\/codepen.io\/bonarhyme\/embed\/preview\/ExLZgdE?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/bonarhyme\/pen\/ExLZgdE\" target=\"_blank\" rel=\"noopener\">\n  CSS Confetti<\/a> by Onuorah Bonaventure Chukwudi (<a href=\"https:\/\/codepen.io\/bonarhyme\" target=\"_blank\" rel=\"noopener\">@bonarhyme<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">16. 10,000 Codepen followers!<\/h3>\n\n\n\n<p>This confetti is presented once the thank you text is completed.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"10,000 Codepen followers!\" src=\"https:\/\/codepen.io\/chrisgannon\/embed\/preview\/qBPGEQy?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/chrisgannon\/pen\/qBPGEQy\" target=\"_blank\" rel=\"noopener\">\n  10,000 Codepen followers!<\/a> by Chris Gannon (<a href=\"https:\/\/codepen.io\/chrisgannon\" target=\"_blank\" rel=\"noopener\">@chrisgannon<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">17. Candy Confetti<\/h3>\n\n\n\n<p>Three types of confetti are presented here first is candy corn then comes leaves and at last bookmarks. Users can choose the confetti among these three from a drop down menu and that confetti will show its magic . <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Candy Cornfetti\" src=\"https:\/\/codepen.io\/danwilson\/embed\/preview\/jOrxNwx?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/danwilson\/pen\/jOrxNwx\" target=\"_blank\" rel=\"noopener\">\n  Candy Cornfetti<\/a> by Dan Wilson (<a href=\"https:\/\/codepen.io\/danwilson\" target=\"_blank\" rel=\"noopener\">@danwilson<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">18. Confetti<\/h3>\n\n\n\n<p>Here the confetti is just like a snowfall. They are falling in random directions some are of small size some are big . <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Confetti\" src=\"https:\/\/codepen.io\/chaitan94\/embed\/preview\/npxwwO?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/chaitan94\/pen\/npxwwO\" target=\"_blank\" rel=\"noopener\">\n  Confetti<\/a> by Krishna Chaitanya (<a href=\"https:\/\/codepen.io\/chaitan94\" target=\"_blank\" rel=\"noopener\">@chaitan94<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">19. Confetti buttons<\/h3>\n\n\n\n<p>Here two buttons are presented one is of confetti and another is of sparkle which on clicking shows there respective roles as their names tell.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Cool Party buttons\" src=\"https:\/\/codepen.io\/martijndevalk\/embed\/preview\/JjEaaXE?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/martijndevalk\/pen\/JjEaaXE\" target=\"_blank\" rel=\"noopener\">\n  Cool Party buttons<\/a> by Martijn de Valk (<a href=\"https:\/\/codepen.io\/martijndevalk\" target=\"_blank\" rel=\"noopener\">@martijndevalk<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">20. paint roller confetti<\/h3>\n\n\n\n<p>Here the confetti is presented in the background and along with that text is beautifully presented in a paint roller .<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"paint roller\" src=\"https:\/\/codepen.io\/marilaza2\/embed\/preview\/WNbqePJ?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/marilaza2\/pen\/WNbqePJ\" target=\"_blank\" rel=\"noopener\">\n  paint roller<\/a> by Maria-Eleni Lazari (<a href=\"https:\/\/codepen.io\/marilaza2\" target=\"_blank\" rel=\"noopener\">@marilaza2<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">21. Confetti Drop Canvas Animation Effect<\/h3>\n\n\n\n<p>The confetti here will be shown on clicking the play button .<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Confetti Drop Canvas Animation Effect\" src=\"https:\/\/codepen.io\/rainner\/embed\/preview\/BEOyJq?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/rainner\/pen\/BEOyJq\" target=\"_blank\" rel=\"noopener\">\n  Confetti Drop Canvas Animation Effect<\/a> by Rainner Lins (<a href=\"https:\/\/codepen.io\/rainner\" target=\"_blank\" rel=\"noopener\">@rainner<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">22. Parallax confetti<\/h3>\n\n\n\n<p>This shows a very slow and soothing Parallax confetti. <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Parallax confetti\" src=\"https:\/\/codepen.io\/jawhitney\/embed\/preview\/dEGVpx?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/jawhitney\/pen\/dEGVpx\" target=\"_blank\" rel=\"noopener\">\n  Parallax confetti<\/a> by Jonathan Whitney (<a href=\"https:\/\/codepen.io\/jawhitney\" target=\"_blank\" rel=\"noopener\">@jawhitney<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<p>Read Also: <a href=\"https:\/\/foolishdeveloper.com\/happy-new-year-using-html-css-javascript\/\" data-type=\"post\" data-id=\"5587\">Happy New Year Using HTML, CSS &amp; Javascript<\/a><\/p>\n\n\n\n<p>So, you saw many different varieties of Confetti which are very beneficial for web development learners whether you are a beginner or a professional one. You can add them whenever you are proceeding with a Confetti animation. It would be very useful for you.<\/p>\n\n\n\n<p>For more such collections stay connected with Foolish Developer and become an expert in coding. If you have any queries feel free to ask in the comment section.<\/p>\n\n\n\n<p>Thank you!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey coding enthusiasts!! Here we are back with the latest and most creative CSS confetti animation collection just by using HTML, CSS, and Javascript. CSS confetti examples Whenever we want to show any interactive and creative celebration effect then Confetti is best to do that. So we explored various codepen examples and found the best [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":5630,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[12,1],"tags":[460],"class_list":["post-5537","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-uncategorized","tag-css-confetti-animations","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/5537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=5537"}],"version-history":[{"count":7,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/5537\/revisions"}],"predecessor-version":[{"id":5761,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/5537\/revisions\/5761"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/5630"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=5537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=5537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=5537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}