Back to Blogs
...

The Gooey Effect

Discover how to create mesmerizing liquid-like animations using SVG filters. This effect makes elements appear to merge and separate like blobs of liquid.

The gooey effect is a visual technique that creates organic, liquid-like connections between elements. When two shapes get close enough, they appear to merge together with a smooth, blob-like transition. This effect has become popular in modern web design for creating playful, dynamic interfaces.

How It Works

The magic behind the gooey effect lies in SVG filters, specifically the combination of feGaussianBlur and feColorMatrix. Here's the breakdown:

  • Blur: The Gaussian blur spreads the edges of elements, creating soft, fuzzy boundaries
  • Contrast: The color matrix increases contrast dramatically, sharpening those blurred edges back into defined shapes
  • Merge: When blurred edges overlap, the contrast boost makes them appear as one continuous blob

The SVG Filter

The filter is defined once in an SVG element and can be reused throughout your page using CSS.

gooey-filter.svg
<svg>
  <defs>
    <filter id="gooey">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
      <feColorMatrix
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 20 -10"
      />
    </filter>
  </defs>
</svg>

Basic Implementation

Let's see the effect in action. Click the button below to watch two circles merge together with that signature gooey connection.

Basic Gooey Effect Demo

Understanding the Parameters

The two key values that control the gooey effect are the blur amount and the contrast multiplier. Experiment with the sliders below to see how they affect the final result.

Interactive Filter Controls
Blur
Contrast

Pro Tips

  • Higher blur values create smoother, more liquid connections
  • Higher contrast values make the effect more pronounced
  • The sweet spot is usually blur: 10 and contrast: 18-20
  • Works best with rounded shapes like circles and rounded rectangles

Practical Application

The gooey effect shines in loaders and animated UI elements. Here's a bouncing loader where the circles merge and separate as they animate, creating a mesmerizing liquid effect.

Gooey Loader Animation

Watch the circles merge and separate as they pings

Browser Support & Performance

SVG filters have excellent browser support across modern browsers. However, keep in mind that filters can be GPU-intensive, especially with high blur values or many animated elements. Use them thoughtfully for the best performance.

  • Supported in all modern browsers (Chrome, Firefox, Safari, Edge)
  • Hardware-accelerated on most devices
  • Consider reducing complexity on mobile devices
  • Test performance with multiple simultaneous animations
The gooey effect is a powerful tool for adding personality to your interfaces. Experiment with different blur and contrast values, combine it with other animations, and create unique interactions that delight your users. Happy coding!