Are you looking to add a touch of fluidity and tranquility to your website's design? Look no further! We are thrilled to present our latest update, featuring a comprehensive collection of hand-picked free HTML and CSS water and waves effect code examples.

With our November 2022 update, we have scoured reputable sources like CodePen, GitHub, and other reliable platforms to bring you an array of captivating water and waves effects.

In addition to traditional water ripple effects, our collection also includes code snippets that replicate the movement of waves, splashes, and even underwater scenes. These effects can be applied to various elements on your website, such as backgrounds, buttons, headers, or even entire sections, allowing you to create a truly immersive and dynamic design.

Dive into our collection today and explore the world of CSS water and waves effects. With our latest update, featuring 4 new items, you'll have even more options to choose from. Happy coding!

Author

  • Oluwakemi

Made with

  • HTML / CSS

About a code

Water Wave CSS Effect

Pure CSS water wave text animation effect using CSS clip-path.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Paulina Hetman

Made with

  • HTML / CSS (SCSS)

About a code

Sunrise Over Still Lake

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Cody Pearce

Made with

  • HTML / CSS

About a code

Octocat Sprite Swimming in the Ocean with CSS

This is a simple animation of Github's logo, Octocat, swimming in the ocean to show how to animate sprites with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Yannick Brandt

Made with

  • HTML / CSS

About a code

Pure CSS Rain

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Goodkatz

Made with

  • HTML / CSS

About a code

Simple CSS Waves

Lightweight animation between header & content. Easy to customize and apply to any website! Works with all devices and screen sizes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Travis Doughty

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Underwater Pure CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ivan Grozdic

Made with

  • HTML / CSS

About a code

Outline. Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Nicholas Gratton

Made with

  • HTML / CSS

About the code

Waves

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Pure CSS Random Rain with SVG and CSS Variables

Using randomly generated CSS variables cuts down the CSS and gives droplets random positioning and animation properties.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Istiyak Amin

Made with

  • HTML / CSS

About a code

CSS Water Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • JustSaas

Made with

  • HTML / CSS

About a code

Cup Filling with Water CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Author

  • Jaron White

Made with

  • HTML / CSS

About the code

Water Drop

Simple ripple animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Adib Behjat

Made with

  • HTML / CSS

About the code

Drip Drop Animation

Water dripping and dropping. Using bezier curve to get the correct speed.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Jérôme Beau

Made with

  • HTML / CSS (SCSS)

About the code

Water Droplets on Window

Focusing effect on either first translucent layer or the layer behind.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Lucas Bebber

Made with

  • HTML / CSS (SCSS)

About the code

CSS Text Filling with Water

A text filling with water animation, for preloaders and such.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -