Прогрессивное размытие
Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for âprogressive blurâ, âgradient blur overlayâ, or stepped blur masks that fade from an edge of the viewport.
Что делает навык
Навык генерирует многослойный CSS-эффект прогрессивного размытия (progressive blur) с использованием нескольких масок backdrop-filter для создания глубины и мягкости. Он решает задачу визуального затухания контента от края viewport, предлагая варианты размытия сверху или снизу.
Когда применять
- Создание эффекта градиентного размытия (gradient blur overlay) для выделения контента.
- Реализация ступенчатых масок размытия, плавно затухающих от края экрана.
- Добавление визуальной глубины интерфейсу при запросе «progressive blur».
- Смягчение фона в верхней или нижней части viewport без блокировки кликов.
Как работает
- Подтвердить размещение (сверху или снизу), высоту и z-index относительно UI.
- Предоставить соответствующий HTML-фрагмент и CSS-код с настройками.
- Дать краткий чек-лист использования (вставка в body, размещение элемента, проверка фона).
- Предложить целевые настройки: высоту, шаги размытия, направление и остановки непрозрачности.
Примеры запросов агенту
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
SKILL.md к навыкам ассистентаНавык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.