CSS craftLocal editorial record

Gooey blob system

Create a gooey blob system using SVG filters where multiple shapes merge into a single fluid form.

Catalog record

Installable source artifact

This page explains the direction locally, then links to the exact upstream artifact and its verified install command.

What this gives you

A clearer brief for the agent.

Describes the CSS techniques that create a specific visual effect without one-off chaos.

Expected result

More expressive surfaces that remain maintainable and responsive.

Use it when

The design depends on gradients, masks, texture, layering, or advanced states.

Source repository stars

4.9K

Source repository · verified 2026-08-17

Install status

Installable source artifact

gooey-blob-system · Skills CLI

Install this skill with one command.

This exact source artifact can be installed in your project with the Skills CLI.

$npx skills add https://github.com/MengTo/Skills --skill gooey-blob-system

Skill name: gooey-blob-system · installs into the agent directory selected by the CLI.

Open source SKILL.md Read install guidance

Related directions

Continue inside DesignMD.

Atmosphere backgroundCreate a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom.CSS alpha maskingApply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image).CSS border gradientApply subtle gradient-border treatments for premium web surfaces.Number detailsAdd decorative 01, 02, 03 numeric detail markers.