# How to Create a Water Ripple Text Effect with SVG Filters

DevFeed: [How to Create a Water Ripple Text Effect with SVG Filters](<https://devfeed.tech/articles/svg-filters-are-just-amazing-20475.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/svg-filters-are-just-amazing/>)

Author: Amit Merchant

Published: 2026-01-12T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [SVG](<https://devfeed.tech/topics/svg.md>), [SVG animations in CSS](<https://devfeed.tech/topics/svg-animations-in-css.md>), [CSS](<https://devfeed.tech/topics/css.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [effect](<https://devfeed.tech/tags/effect.md>), [filter](<https://devfeed.tech/tags/filter.md>), [guide](<https://devfeed.tech/tags/guide.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [svg](<https://devfeed.tech/tags/svg.md>)

## AI overview

This tutorial explains how to create a water ripple effect on text using SVG filters and CSS. It covers defining the target element, configuring filter primitives for noise and turbulence, adjusting their parameters, and applying the filter in CSS.

## Source excerpt

So, lately, I have been exploring Haley Park's website and it's pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets.