Realistic Water Effect without JavaScript – HTML/CSS Only

Realistic Water Effect without JavaScript –  HTML/CSS Only

if you think this is a video background
you’re wrong it’s only HTML and CSS and this tutorial I’m going to show you how
to create a realistic water effect using SVG turbulence filter and CSS let’s
check it out so first let’s create a div and then set this image as background in
CSS next I’m going to create a mask layer I
will use Photoshop to remove all non water part of the image you can use
quick selection tools for this job use shift button to add a selection
sometimes if you pick up more area than you need so you can use the alternate
button to remove it once you got all the non water part
press Delete then you can use the eraser tools for
detailing and then save the file as transparent
PNG now I’m going to create a new div inside
the first and then set the mask image that we
created as background you won’t see any change yet but the
next step is to key we will use SVG turbulence filter basically it’s a
filter that creates a turbulence effect on any element. The splash you see here
it was a circle before the filter was applied you can create a turbulence
filter using SVG tag then set up the turbulence frequency and
some characteristic then applied to any element using CSS filter property
okay let’s start first create SVG tag and a future tag inside we will set the origin position
to 0 and size to 100% then create feTurbulence tag here you
can define the characteristic of the turbulence using attribute like seed and
frequency it’s easier to understand each of them in action there is a nice
article on codrop with demo that you can try out you can find link in the
video description box next create if a displacement map tag
here you can set the future scale amount and input we are set it to sourceGraphic which means we’ll use the source element that the future was applied on
as input then create animate tag and linked it with our filter id we will animate the baseFrequency to create a ripple effect we will set the duration to 60 seconds the keyTimes and values are basically the same as keyframes in CSS. What I’ve just
typed means I have divided the animation into 3 keyframes. First the baseFrequency is at 0.02 and 0.06 Then at the half of the
animation is 0.04 and 0.08 Then at the end is back to 0.02 and 0.06 again I will also set the repeat count to
indefinite to create a loop and finally applied filter in CSS using
the id of the filter tag and that’s all for this tutorial you can
find a code in the video description box if you love this and want to see more
dev tips and tutorials subscribe our channel to stay tuned thanks for
watching see you next time bye


  1. Very interesting. I've used SVG filters and masks before (using feColorMatrix to recolour a character's football uniform), but haven't looked into other filters like this one.

  2. Очень круто! Но нифига не понятно. Повторить легко, а кастомизировать нереально. Надо в эти фильтры погружаться. А так спасибо за пример!)

    Cool effect!

  3. you need to change the title from Realistic Water Effect without JavaScript – HTML/CSS Only to Realistic Water Effect without JavaScript – HTML/CSS Only/photoshop

  4. It's so beautiful, I cried tears of joy. I saw the face of God in the peaceful flow of the water. I don't believe this is just HTML and CSS, I believe you are a profit sent down from the heavens to guide us through these trying times. I'm willing to fight for you, just tell us all what to do. Why are we here?

  5. Обычный человек: я поставлю видео на фон и не буду париться

  6. Okay I think this ia the best time to return in learning again html, css and this svg things. It is so wonderful to watch.

Leave a Reply

Your email address will not be published.