菜单
Create layered progressive blur overlays using stacked backdrop-filter with CSS masks — top or bottom blur, adjustable height, steps, and performance-friendly patterns.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Interact with Hermes Agent's OpenAI-compatible API for multi-model conversations, skill management, and scheduled tasks
Generate and manage Docker Compose stacks via the better-openclaw API
Deploy and manage a self-hosted Tailscale control server (Headscale) for zero-trust private networking and secure access to your stack.
A specialized skill workflow instructing you to use Serper (for discovery) and any configured Browser Automation provider (Hyperbrowser, Browseruse, Lightpanda, or Browserless) to scrape official documentation and teach yourself new technical skills.
Instructions for utilizing the HexStrike AI MCP Server for automated pentesting and security research.
Instructions for managing the PentAGI autonomous AI agent system for complex penetration testing tasks.
| name | progressive-blur |
| description | Create layered progressive blur overlays using stacked backdrop-filter with CSS masks — top or bottom blur, adjustable height, steps, and performance-friendly patterns. |
| metadata | {"openclaw":{"emoji":"🌫️","source":"https://github.com/MengTo/Skills"}} |
<body>.gradient-blur near the top of the DOMz-index to sit above content but below modals<div class="gradient-blur">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<style>
.gradient-blur {
position: fixed; z-index: 5;
inset: 0 0 auto 0; height: 12%;
pointer-events: none;
}
.gradient-blur > div, .gradient-blur::before, .gradient-blur::after {
position: absolute; inset: 0;
}
.gradient-blur::before {
content: ""; z-index: 1; backdrop-filter: blur(0.5px);
mask: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%);
}
/* Additional layers with increasing blur: 1px, 2px, 4px, 8px, 16px, 32px, 64px */
.gradient-blur::after {
content: ""; z-index: 8; backdrop-filter: blur(64px);
mask: linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%);
}
</style>
to top ↔ to bottom.gradient-blur height percentagebackdrop-filter needs content behind it — won't blur a flat backgroundpointer-events: none is essential to avoid blocking clicks