30+ CSS Ripple Effects

Top 30+ HTML and CSS ripple effect code examples sourced from CodePen, GitHub, and other top-notch platforms.

From water ripple animation to button ripple effect and toggle ripple button to pure CSS ripple animation, a wide array of unique and stylish ripple code snippets for web designers and user interface developers. Try it now!

1. Water Ripple Animation Ripples

See the Pen <a href="https://codepen.io/Mactejo/pen/PowmzKd"> Water-Ripple-Animation-ripples</a> by Ivan (<a href="https://codepen.io/Mactejo">@Mactejo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ivan
Source: Code / Demo
Created on: DECEMBER 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. Button Ripple Effect

See the Pen <a href="https://codepen.io/mkurapov/pen/bwezab"> Button Ripple Effect</a> by Max Kurapov (<a href="https://codepen.io/mkurapov">@mkurapov</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Max Kurapov
Source: Code / Demo
Created on: SEPTEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

3. Pure CSS Ripple Animation

See the Pen <a href="https://codepen.io/lrsingh/pen/MVdxXy"> Pure CSS Ripple Animation</a> by Leah Singh (<a href="https://codepen.io/lrsingh">@lrsingh</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Leah Singh
Source: Code / Demo
Created on: APRIL 13, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

4. Pure CSS Card Ripple Effect

See the Pen <a href="https://codepen.io/daiquiri/pen/VyRZeB"> #25 – Pure CSS Card Ripple Effect</a> by Daiquiri.io (<a href="https://codepen.io/daiquiri">@daiquiri</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daiquiri.io
Source: Code / Demo
Created on: JANUARY 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. Ripple Effect

See the Pen <a href="https://codepen.io/sabitha_kuppusamy/pen/YbMxVX"> Ripple effect</a> by Sabitha Kuppusamy (<a href="https://codepen.io/sabitha_kuppusamy">@sabitha_kuppusamy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sabitha Kuppusamy
Source: Code / Demo
Created on: JUNE 05, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. Material Design Ripple Effect using CSS and JS

See the Pen <a href="https://codepen.io/nitishkmrk/pen/vaoWye"> Material Design Ripple Effect using CSS and JS</a> by Nitish Khagwal (<a href="https://codepen.io/nitishkmrk">@nitishkmrk</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nitish Khagwal
Source: Code / Demo
Created on: AUGUST 17, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

7. Ripple Animation Button

See the Pen <a href="https://codepen.io/chrisunderdown/pen/JeXNoz"> Ripple Animation Button</a> by Chris Underdown (<a href="https://codepen.io/chrisunderdown">@chrisunderdown</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Underdown
Source: Code / Demo
Created on: NOVEMBER 08, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

8. Material Design Ripple Effect with JavaScript

See the Pen <a href="https://codepen.io/ayoisaiah/pen/GWwabJ"> Material Design Ripple Effect with JavaScript</a> by Ayooluwa (<a href="https://codepen.io/ayoisaiah">@ayoisaiah</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ayooluwa
Source: Code / Demo
Created on: MARCH 30, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

9. Toggle Button with Ripple

See the Pen <a href="https://codepen.io/iremlopsum/pen/NXQjZo"> toggle button with ripple</a> by Irem Lopsum (<a href="https://codepen.io/iremlopsum">@iremlopsum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Irem Lopsum
Source: Code / Demo
Created on: JANUARY 26, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

10. CSS-only ripple toggle with dynamic text colour

See the Pen <a href="https://codepen.io/liamj/pen/vvdRdR"> CSS-only ripple toggle with dynamic text colour</a> by Liam (<a href="https://codepen.io/liamj">@liamj</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Liam
Source: Code / Demo
Created on: JANUARY 04, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. CSS Ripple Effect

See the Pen <a href="https://codepen.io/skillhubbd/pen/OJgQzZz"> Css Ripple effect</a> by SkillHub (<a href="https://codepen.io/skillhubbd">@skillhubbd</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: SkillHub
Source: Code / Demo
Created on: SEPTEMBER 18, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Material Design Ripple Buttons With SVG Shapes

See the Pen <a href="https://codepen.io/bap13/pen/Gjvdgd"> Material Design Ripple Buttons With SVG Shapes</a> by Brett Peters (<a href="https://codepen.io/bap13">@bap13</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brett Peters
Source: Code / Demo
Created on: SEPTEMBER 30, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

13. Circular Ripple Hover Effect on Button

See the Pen <a href="https://codepen.io/ViktorKorolyuk/pen/GYGwpv"> Circular Ripple Hover Effect on Button</a> by wifidev (<a href="https://codepen.io/ViktorKorolyuk">@ViktorKorolyuk</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: wifidev
Source: Code / Demo
Created on: OCTOBER 21, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

14. Material Ripple Effect

See the Pen <a href="https://codepen.io/Schlipak/pen/MYdJdW"> Material Ripple effect</a> by Guillaume Schlipak (<a href="https://codepen.io/Schlipak">@Schlipak</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Guillaume Schlipak
Source: Code / Demo
Created on: APRIL 06, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

15. Navigation Bar Ripple Effects

See the Pen <a href="https://codepen.io/pranali7/pen/yOQeKV"> Navigation Bar ripple effects</a> by Pranali (<a href="https://codepen.io/pranali7">@pranali7</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pranali
Source: Code / Demo
Created on: MAY 01, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Ripple Animation on Input Type Radio and Checkbox

See the Pen <a href="https://codepen.io/wtaype/pen/pNXwMW"> Ripple animation on input type radio and Checkbox</a> by WILDER TAYPE (<a href="https://codepen.io/wtaype">@wtaype</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: WILDER TAYPE
Source: Code / Demo
Created on: DECEMBER 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Ripple Button with Vue JS

See the Pen <a href="https://codepen.io/takaneichinose/pen/KJVLqm"> Ripple button with VueJS</a> by Takane Ichinose (<a href="https://codepen.io/takaneichinose">@takaneichinose</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Takane Ichinose
Source: Code / Demo
Created on: JANUARY 26, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript(Babel)

18. Neumorphism – Ripple

See the Pen <a href="https://codepen.io/antoniolee/pen/ZEGRwdp"> 004: Neumorphism – Ripple</a> by antwon (<a href="https://codepen.io/antoniolee">@antoniolee</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: antwon
Source: Code / Demo
Created on: MARCH 19, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. CSS Ripple Effect

See the Pen <a href="https://codepen.io/daless14/pen/DqXMvK"> CSS ripple effect</a> by Anthony DAlessio (<a href="https://codepen.io/daless14">@daless14</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anthony DAlessio
Source: Code / Demo
Created on: JULY 21, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. A loader with Ripple Effect

See the Pen <a href="https://codepen.io/ecl91/pen/qBNNBgz"> A loader with ripple effect</a> by Egy Chandra (<a href="https://codepen.io/ecl91">@ecl91</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Egy Chandra
Source: Code / Demo
Created on: OCTOBER 18, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Jquery Water Ripple Effect

See the Pen <a href="https://codepen.io/divinector/pen/GaBOzP"> Jquery Water Ripple Effect</a> by Divinector (<a href="https://codepen.io/divinector">@divinector</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Divinector
Source: Code / Demo
Created on: MAY 28, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

22. Ripple Effect with Only CSS

See the Pen <a href="https://codepen.io/md-aqil/pen/LOeGXb"> ripple effect with only css</a> by md aqil (<a href="https://codepen.io/md-aqil">@md-aqil</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: md aqil
Source: Code / Demo
Created on: NOVEMBER 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. Material Design Ripple

See the Pen <a href="https://codepen.io/Craigtut/pen/zYERLY"> Material Design Ripple</a> by Craig Tuttle (<a href="https://codepen.io/Craigtut">@Craigtut</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Craig Tuttle
Source: Code / Demo
Created on: JULY 3, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

24. Pure CSS Ripple Effect for Material Design

See the Pen <a href="https://codepen.io/finnhvman/pen/jLXKJw"> Pure CSS ripple effect for Material Design</a> by Bence Szabo (<a href="https://codepen.io/finnhvman">@finnhvman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bence Szabo
Source: Code / Demo
Created on: AUGUST 31, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. Bootstrap 4 Animated Buttons with Ripple Effect

See the Pen
Bootstrap 4 Animated Buttons with Ripple Effect by Rüdiger Alte (@drralte)
on CodePen.

Author: Rüdiger Alte
Source: Code / Demo
Created on: JANUARY 08, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Button Ripple Effect

See the Pen <a href="https://codepen.io/kris-ellery/pen/LYOJBX"> Button Ripple Effect</a> by Kris Ellery (<a href="https://codepen.io/kris-ellery">@kris-ellery</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kris Ellery
Source: Code / Demo
Created on: JULY 12, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

27. Logo with Ripple Effect

See the Pen <a href="https://codepen.io/ainalem/pen/LqvBWO"> Logo with ripple effect</a> by Mikael Ainalem (<a href="https://codepen.io/ainalem">@ainalem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mikael Ainalem
Source: Code / Demo
Created on: FEBRUARY 21, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

28. Hover Ripple

See the Pen <a href="https://codepen.io/magnificode/pen/pbeJmV"> Hover Ripple</a> by magnificode (<a href="https://codepen.io/magnificode">@magnificode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: magnificode
Source: Code / Demo
Created on: JUNE 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. Slider with Ripple Effect v1.1

See the Pen <a href="https://codepen.io/aspeddro/pen/dMxyde"> Slider with Ripple Effect v1.1</a> by Pedro Castro (<a href="https://codepen.io/aspeddro">@aspeddro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pedro Castro
Source: Code / Demo
Created on: MAY 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

30. Ripple Effect

See the Pen <a href="https://codepen.io/peterhry/pen/YzQmrX"> Ripple Effect</a> by Peter Hrynkow (<a href="https://codepen.io/peterhry">@peterhry</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Peter Hrynkow
Source: Code / Demo
Created on: JUNE 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

31. Android L Ripple Effect

See the Pen <a href="https://codepen.io/idiotWu/pen/mdxzZd"> Android L Ripple Effect</a> by Dolphin Wood (<a href="https://codepen.io/idiotWu">@idiotWu</a>) on <a href="https://codepen.io">CodePen</a>. Author: Dolphin Wood
Source: Code / Demo
Created on: AUGUST 7, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript