7 CSS Gooey Effects: Free Examples & Code Snippets

css by Vladimir 2 min read

CSS gooey effects mimic the natural, cohesive tension of liquid substances, allowing adjacent interface elements to stick and merge organically as they move. By creating fluid transitions between digital components, this technique introduces a highly tactile, physics-based dimension to standard layout behaviors.

  • The visual illusion is generated by applying a heavy blur filter to adjacent elements and instantly sharpening their outlines with a high-contrast alpha threshold.
  • Advanced implementations isolate these expensive pixel manipulations inside an inline SVG feColorMatrix filter, calculating alpha-channel values natively on the GPU.
  • To preserve INP (Interaction to Next Paint) responsiveness, continuous gooey animations restrict target layers to promoted composited contexts using transform translations.

Dive into these liquid-distortion techniques to craft highly engaging, organic morphing menus and physics-inspired page transitions.

Table of Contents:

  1. Examples
  2. Frequently Asked Questions

Examples

Liquid toggle switch using SVG feGaussianBlur filter and CSS keyframe animations to create a fluid, gooey snapping behavior.

Gooey Liquid SVG Filter Toggle Switch

Gooey Liquid SVG Filter Toggle Switch uses a classic SVG filter trick — combining a blur (feGaussianBlur) with a high-contrast color matrix (feColorMatrix) — to achieve a fluid, organic morphing effect. The sliding thumb dynamically deforms and stretches before snapping into place. Built with modern CSS custom properties and individual transform properties, it includes a simple JavaScript loop for continuous demonstration.

Technologies:
HTML CSS/SCSS
Difficulty: Intermediate
Browser Support (as of Jun 2026):
Chrome Chrome 111+ Edge Edge 111+ Firefox Firefox 113+ Safari Safari 16.2+
Features:
Gooey Liquid Effect SVG Filter Fluid Snapping
Code by: Konstantin Denerz Konstantin Denerz
License: MIT
Vertical list of radio buttons with a white liquid ball morphing between selected options using SVG gooey filters

Gooey Liquid Radio Buttons

This is a Gooey Liquid Radio Button group. It overrides the default OS radio inputs with a custom SVG-filtered visual state. Its function is to provide highly tactile, liquid-like feedback when a user selects between mutually exclusive options, making data entry feel physical and alive.

Technologies:
HTML CSS JavaScript
Difficulty: Intermediate
Browser Support (as of May 2026):
Chrome Chrome 51+ Edge Edge 79+ Firefox Firefox 54+ Safari Safari 10+
Features:
Gooey Filter Custom Inputs State Morphing
Code by: Mikael Ainalem Mikael Ainalem
License: MIT

See the Pen Gooey Liquid Radio Buttons.

Animated text revealing itself as liquid drops falling and merging into a puddle using SVG gooey filters

Liquid Puddle Text Reveal

This is a Liquid Puddle Text Reveal. It transforms standard typographic elements into falling droplets that merge organically into readable words. Its function is to provide a highly stylized, kinetic introduction for hero headlines, replacing standard opacity fades with a physical, fluid simulation.

Technologies:
HTML Sass JavaScript
Difficulty: Intermediate
Browser Support (as of Apr 2026):
Chrome Chrome 60+ Edge Edge 79+ Firefox Firefox 55+ Safari Safari 11+
Features:
Gooey Filter Text Splitting Staggered Animation
Code by: Tudor Tudor
License: MIT

See the Pen Liquid Puddle Text Reveal.

Gooey Clock

Gooey Clock

A functional clock face featuring a morphing, lava-lamp-like background created by filtering overlapping SVG shapes.

See the Pen Gooey Clock.

Liquid Gooey UI Elements

Liquid Gooey UI Elements

Explore the powerful tandem of GSAP and CSS Variables, where to/fromTo with keyframes control SVG elements inside Radio/Checkbox/Switch. The animations utilize the feColorMatrix filter (the “Gooey” effect) and SVG transforms to create smoothly “flowing” shapes and stylish toggles.

See the Pen Liquid Gooey UI Elements.

Scroll-Driven Gooey Island

Check out this cutting-edge “sticky island” effect that dynamically squishes and transforms on scroll using CSS Scroll-Timeline. The core technical feature is creating the Gooey effect by combining filter: blur() and contrast() with absolute control linked to the scroll position.

See the Pen Scroll-Driven Gooey Island.

Floating Button

A “gooey effect” menu with a cascading reveal, implemented in pure CSS and SVG filters. The animation is controlled by the “checkbox hack,” where each menu item gets its own transition-duration for sequential appearance. The “gooeyness” is achieved using an SVG filter with feGaussianBlur and feColorMatrix, where a custom matrix removes semi-transparency and creates a merging effect.

See the Pen Floating Button.

Frequently Asked Questions

Why use native CSS and SVG filters for gooey effects instead of Canvas or WebGL libraries?

CSS and inline SVG filters maintain semantic DOM nodes and preserve full native browser capabilities like text selection, form input focus, and accessibility. Canvas or WebGL pipelines require completely redrawing elements imperatively within a single bitmap context, introducing heavy script payloads and rendering overhead.

How can we keep gooey-filtered menus accessible for screen readers and keyboard users?

The high-contrast color matrix and blur filters applied to a gooey container do not alter the underlying DOM hierarchy. To ensure accessible navigation, maintain native focus states on hidden links, and implement an automatic fallback that bypasses the gooey filter when a user is browsing with keyboard focus or has system-level prefers-reduced-motion enabled.

Why do gooey filters cause rendering lag, and how can they be optimized?

Combining Gaussian blurs with dynamic color matrices requires intense per-pixel rasterization steps on every animation frame. To prevent main-thread blockages and protect your INP score, isolate the filtered elements inside a container with contain: paint and promote them to independent rendering layers via will-change: transform.

What is the exact role of feGaussianBlur and feColorMatrix in producing the gooey illusion?

The feGaussianBlur primitive merges the visual boundaries of adjacent DOM elements by spreading their pixels. The subsequent feColorMatrix target maps the alpha channel’s transparency gradient, aggressively raising the contrast threshold (typically using matrix values like 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7) to snap the blurred edges back into sharp, cohesive lines.

What is the cleanest fallback approach for legacy rendering engines that struggle with SVG filters?

Wrap the gooey filter application within a @supports (filter: url('#goo')) block. For browsers lacking SVG filter capabilities, gracefully degrade the animation to a standard, non-gooey CSS transition utilizing basic opacity and spatial scale transforms to maintain layout usability.