Gooey Venom Cursor — CSS Filter Animation with Source Code

The Gooey Venom Cursor is an organic, liquid-metal style interaction where blobs of color appear to stretch, pull, and merge with each other. This effect, often called “Meta-balls,” creates a high-end, biological feel that makes your interface feel alive and tactile.

How It Works

This “impossible” CSS effect is achieved using the Contrast-Blur Trick. A container is given a set of SVG filters (feGaussianBlur and feColorMatrix). The blur softens the edges of all children, and the high-contrast color matrix then “sharpens” them back up. When two blurred objects get close to each other, their blurs overlap, and the contrast filter perceives this as a single large shape, creating the “gooey” bridge between them.

Use Cases

• Premium cursor trails and custom pointers
• “Magnetic” navigation items that pull toward the mouse
• Organic background decorations for high-end design folios
• Creative “loading” or “filling” bar animations

How to Customize

• Gooey Intensity: Adjust the stdDeviation in the <feGaussianBlur> (higher = more “melted” look).
• Blob Colors: Change the background of the .blob and .cursor classes. You can even use gradients!
• Contrast Strength: Modify the 20 -10 values in the feColorMatrix. The first is contrast, the second is the transparency threshold (alpha).

Frequently Asked Questions

Is this performance intensive?

Filters like blur and contrast applied to whole containers can be demanding on mobile devices. It is best to use this effect within a defined div area rather than on the entire body if you plan on having many moving elements.

Why do the blobs look pixelated?

If the contrast is too high or the blur is too low, the edges might appear aliased (jagged). Adjust the stdDeviation slightly to find the “sweet spot” for your specific container size.

Can I put text inside the gooey layer?

Because the contrast filter is applied to the entire container, text inside it will also be sharpened and slightly distorted. For best results, place text in a separate layer on top of the gooey container rather than inside it.