30+ CSS Ripple Effects

Discover the power of CSS ripple effects to elevate your UI design with our curated compilation to create smooth, engaging web animations for a dynamic user experience. In this collection, we are showcasing top 30+ HTML and CSS ripple effect code examples that we have collected from CodePen, GitHub, and other top-notch platforms.

The ripple effect is a visual effect often used in web design; it resembles a wave-like animation that shines outward from the point of user interaction, usually on a click or tap. Ripple effect is mostly added to buttons, links, or other interactive elements on a webpage to simulate the look of a drop creating ripples in water.

From water ripple animation to button ripple effect and toggle ripple button to pure CSS ripple animation, we have a wide array of unique and stylish ripple code snippets for web designers and user interface developers. Each ripple effect comes with visually striking and aesthetically pleasing options that can uplift the appearance of your web applications.

So, let’s dive into our collection of the best CSS ripple effects and make your site visitors awestruck.

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