CSS Confetti Effects

Hello Coder! In this article, we give you 25+ CSS Confetti Effects with Examples and Source Code. We have All types of Confetti Effects in this Collection.

Here is Our 46+ CSS Confetti Animation Article!

46+ CSS Confetti Animation

1. CSS Confetti

Table of Contents

See the Pen <a href="https://codepen.io/andyobrien/pen/WYrxMe" target="_blank" rel="noopener"> css confetti</a> by Andy (<a href="https://codepen.io/andyobrien" target="_blank" rel="noopener">@andyobrien</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Andy
Demo And Download	Click Here For The Code
Language Used	HTML / CSS (SCSS)
External Links\ Dependencies	–
Responsive	–

2. Pure CSS Confetti

See the Pen <a href="https://codepen.io/bendenfield/pen/JMEMMR" target="_blank" rel="noopener"> Pure CSS Confetti</a> by Max Mühlbauer (<a href="https://codepen.io/bendenfield" target="_blank" rel="noopener">@bendenfield</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Max Mühlbauer
Demo And Download	Click Here For The Code
Language Used	HTML / CSS (SCSS)/JS
External Links\ Dependencies	–
Responsive	–

3. CSS Confetti

See the Pen <a href="https://codepen.io/meodai/pen/RwWypBd" target="_blank" rel="noopener"> CSS Confetti</a> by David Aerne (<a href="https://codepen.io/meodai" target="_blank" rel="noopener">@meodai</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	David Aerne
Demo And Download	Click Here For The Code
Language Used	HTML / CSS (SCSS)/JS
External Links\ Dependencies	–
Responsive	–

4. CSS Confetti

See the Pen <a href="https://codepen.io/moonglows76/pen/BRVrgZ" target="_blank" rel="noopener"> css confetti</a> by Fuminori Mori (<a href="https://codepen.io/moonglows76" target="_blank" rel="noopener">@moonglows76</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Fuminori Mori
Demo And Download	Click Here For The Code
Language Used	HTML / CSS (SCSS)
External Links\ Dependencies	–
Responsive	–

5. Pure CSS Confetti + Make It Rain $ Animation

See the Pen <a href="https://codepen.io/joshfitzgerald/pen/XWRqbEy" target="_blank" rel="noopener"> Pure CSS Confetti + Make It Rain $ Animation</a> by Josh Fitzgerald (<a href="https://codepen.io/joshfitzgerald" target="_blank" rel="noopener">@joshfitzgerald</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Josh Fitzgerald
Demo And Download	Click Here For The Code
Language Used	HTML(PUG)/ CSS (SCSS)
External Links\ Dependencies	–
Responsive	–

5.1 CSS Confetti Congratulations

See the Pen <a href="https://codepen.io/amardeeprai/pen/YzNLEav" target="_blank" rel="noopener"> Pure CSS Confetti</a> by Amardeep Rai (<a href="https://codepen.io/amardeeprai" target="_blank" rel="noopener">@amardeeprai</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

25+ CSS Confetti Effects

Code By-	Amardeep Rai
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS (SCSS)
External Links\ Dependencies	–
Responsive	–

6. Celebrating Confetti

See the Pen <a href="https://codepen.io/lilianqian/pen/OxzeyZ" target="_blank" rel="noopener"> celebrating confetti</a> by Lilian (<a href="https://codepen.io/lilianqian" target="_blank" rel="noopener">@lilianqian</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Lilian
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS
External Links\ Dependencies	–
Responsive	Yes

7. CSS confetti

See the Pen <a href="https://codepen.io/miawalice/pen/ZeQNWv" target="_blank" rel="noopener"> CSS confetti</a> by Alice Morris (<a href="https://codepen.io/miawalice" target="_blank" rel="noopener">@miawalice</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Alice Morris
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS
External Links\ Dependencies	–
Responsive	–

8. CSS confetti

See the Pen <a href="https://codepen.io/overtanned/pen/dypaOQa" target="_blank" rel="noopener"> CSS Confetti</a> by Ratna (<a href="https://codepen.io/overtanned" target="_blank" rel="noopener">@overtanned</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Ratna
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS
External Links\ Dependencies	–
Responsive	–

9 CSS confetti

See the Pen <a href="https://codepen.io/bonarhyme/pen/ExLZgdE" target="_blank" rel="noopener"> CSS Confetti</a> by Onuorah Bonaventure Chukwudi (<a href="https://codepen.io/bonarhyme" target="_blank" rel="noopener">@bonarhyme</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Onuorah Bonaventure Chukwudi
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS
External Links\ Dependencies	–
Responsive	–

10. Pure CSS Confetti (Based on pure CSS fireworks)

See the Pen <a href="https://codepen.io/JBeth1990/pen/abWaPXN" target="_blank" rel="noopener"> Pure CSS Confetti (Based on pure CSS fireworks)</a> by JBeth (<a href="https://codepen.io/JBeth1990" target="_blank" rel="noopener">@JBeth1990</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	JBeth
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS(SCSS)
External Links\ Dependencies	–
Responsive	–

11. Pure CSS Confetti (Based on pure CSS fireworks)

See the Pen <a href="https://codepen.io/aristamademe/pen/JjZZzBJ" target="_blank" rel="noopener"> CSS Falling Confetti (Light )</a> by Arista (<a href="https://codepen.io/aristamademe" target="_blank" rel="noopener">@aristamademe</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Arista
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS
External Links\ Dependencies	–
Responsive	–

12. CSS Firework confetti

See the Pen <a href="https://codepen.io/r8n5n/pen/mmeKVp" target="_blank" rel="noopener"> CSS Firework confetti</a> by r8n5n (<a href="https://codepen.io/r8n5n" target="_blank" rel="noopener">@r8n5n</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	r8n5n
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS
External Links\ Dependencies	–
Responsive	–

13. Confirm confetti button

See the Pen <a href="https://codepen.io/aaroniker/pen/bGVGNrV" target="_blank" rel="noopener"> Confirm confetti button</a> by Aaron Iker (<a href="https://codepen.io/aaroniker" target="_blank" rel="noopener">@aaroniker</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Aaron Iker
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS(SCSS)
External Links\ Dependencies	–
Responsive	–

14. Confetti Button

See the Pen <a href="https://codepen.io/coopergoeke/pen/wvaYMbJ" target="_blank" rel="noopener"> Confetti Button</a> by Cooper Goeke (<a href="https://codepen.io/coopergoeke" target="_blank" rel="noopener">@coopergoeke</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Cooper Goeke
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS(SCSS)
External Links\ Dependencies	–
Responsive	–

15. Confetti, CSS only, no JavaScript

See the Pen <a href="https://codepen.io/fionnachan/pen/EvaqOB" target="_blank" rel="noopener"> Confetti, CSS only, no JavaScript</a> by Fionna (<a href="https://codepen.io/fionnachan" target="_blank" rel="noopener">@fionnachan</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Fionna
Demo And Download	Click Here For The Code
Language Used	HTML(Pug)/ CSS(SCSS)
External Links\ Dependencies	–
Responsive	–

16. Falling Confetti

See the Pen <a href="https://codepen.io/linrock/pen/nMadjQ" target="_blank" rel="noopener"> Falling Confetti</a> by Linmiao Xu (<a href="https://codepen.io/linrock" target="_blank" rel="noopener">@linrock</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Linmiao Xu
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS/JS(CoffeeScript)
External Links\ Dependencies	–
Responsive	–

17. Confetti Cannon

See the Pen <a href="https://codepen.io/jscottsmith/pen/VjPaLO" target="_blank" rel="noopener"> Confetti Cannon</a> by J Scott Smith (<a href="https://codepen.io/jscottsmith" target="_blank" rel="noopener">@jscottsmith</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	J Scott Smith
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS(SCSS)/JS(Bable)
External Links\ Dependencies	–
Responsive	–

18. CSS Particle Effects

See the Pen <a href="https://codepen.io/z-/pen/bpxgWZ" target="_blank" rel="noopener"> CSS Particle Effects</a> by Zed Dash (<a href="https://codepen.io/z-" target="_blank" rel="noopener">@z-</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Zed Dash
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS(SCSS)/JS
External Links\ Dependencies	–
Responsive	–

19. Falling Confetti

See the Pen <a href="https://codepen.io/vchi/pen/DEBOpg" target="_blank" rel="noopener"> Falling Confetti</a> by Vlad Chi (<a href="https://codepen.io/vchi" target="_blank" rel="noopener">@vchi</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

25+ CSS Confetti Effects

Code By-	Vlad Chi
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS(SCSS)/JS(CoffeeScript)
External Links\ Dependencies	–
Responsive	Yes

20. Falling Confetti

See the Pen <a href="https://codepen.io/enopuente/pen/QWLoYZ" target="_blank" rel="noopener"> Falling Confetti</a> by Edmund Nopuente (<a href="https://codepen.io/enopuente" target="_blank" rel="noopener">@enopuente</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Edmund Nopuente
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS/JS
External Links\ Dependencies	–
Responsive	Yes

21. 100 Falling Particles – requestAnimationFrame & random Colour

See the Pen <a href="https://codepen.io/WillsonSmith/pen/nwVQpA" target="_blank" rel="noopener"> 100 Falling Particles – requestAnimationFrame & random Colour</a> by Willson Smith (<a href="https://codepen.io/WillsonSmith" target="_blank" rel="noopener">@WillsonSmith</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Willson Smith
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS/JS
External Links\ Dependencies	–
Responsive	No

22. Canvas falling particles with wind

See the Pen <a href="https://codepen.io/rlemon/pen/DQNbNE" target="_blank" rel="noopener"> Canvas falling particles with wind</a> by Robert Lemon (<a href="https://codepen.io/rlemon" target="_blank" rel="noopener">@rlemon</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Robert Lemon
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS/JS
External Links\ Dependencies	–
Responsive	Yes

23. dynamic 3D confetti text

See the Pen <a href="https://codepen.io/rachsmith/pen/LpZbmZ" target="_blank" rel="noopener"> dynamic 3D confetti text</a> by Rachel Smith (<a href="https://codepen.io/rachsmith" target="_blank" rel="noopener">@rachsmith</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Rachel Smith
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS/JS
External Links\ Dependencies	–
Responsive	Yes

24 Confetti generator, yo.

See the Pen <a href="https://codepen.io/jacobgunnarsson/pen/pbPwga" target="_blank" rel="noopener"> Confetti generator, yo.</a> by Jacob Gunnarsson (<a href="https://codepen.io/jacobgunnarsson" target="_blank" rel="noopener">@jacobgunnarsson</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Jacob Gunnarsson
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS(SCSS)/JS(Babel)
External Links\ Dependencies	–
Responsive	Yes

25 Confetti Jam!

See the Pen <a href="https://codepen.io/elifitch/pen/apxxVL" target="_blank" rel="noopener"> Confetti Jam!</a> by Eli Fitch (<a href="https://codepen.io/elifitch" target="_blank" rel="noopener">@elifitch</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Eli Fitch
Demo And Download	Click Here For The Code
Language Used	HTML/ CSS(SCSS)/JS(Babel)
External Links\ Dependencies	–
Responsive	Yes

CodeWithRandom

25+ CSS Confetti Effects

CSS Confetti Effects

<br /> See the Pen <a href="https://codepen.io/z-/pen/bpxgWZ" target="_blank" rel="noopener"><br /> CSS Particle Effects</a> by Zed Dash (<a href="https://codepen.io/z-" target="_blank" rel="noopener">@z-</a>)<br /> on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

<br /> See the Pen <a href="https://codepen.io/vchi/pen/DEBOpg" target="_blank" rel="noopener"><br /> Falling Confetti</a> by Vlad Chi (<a href="https://codepen.io/vchi" target="_blank" rel="noopener">@vchi</a>)<br /> on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

Leave a Reply Cancel reply

Navigate

Subscribe Now

CSS Confetti Effects

<br /> See the Pen <a href="https://codepen.io/z-/pen/bpxgWZ" target="_blank" rel="noopener"><br /> CSS Particle Effects</a> by Zed Dash (<a href="https://codepen.io/z-" target="_blank" rel="noopener">@z-</a>)<br /> on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

<br /> See the Pen <a href="https://codepen.io/vchi/pen/DEBOpg" target="_blank" rel="noopener"><br /> Falling Confetti</a> by Vlad Chi (<a href="https://codepen.io/vchi" target="_blank" rel="noopener">@vchi</a>)<br /> on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

You Might Also Like

20+ HTML CSS Parallax Effects

Create Reveal Text On Card Hover Using HTML and CSS

31+ CSS Parallax Examples

Leave a Reply Cancel reply

Navigate

Subscribe Now