CSS craftLocal editorial record

Progressive blur

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness.

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

progressive-blur · 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 progressive-blur

Skill name: progressive-blur · 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.Gooey blob systemCreate a gooey blob system using SVG filters where multiple shapes merge into a single fluid form.