CSS Alpha Masking Skill
SkillMediaApply CSS alpha masking with linear-gradient for horizontal or vertical edge fades using mask-image and -webkit-mask-image. Use for fade edges, alpha masks, or CSS mask gradients.
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.
Then ask your AI: use the CSS Alpha Masking Skill skill
What this skill tells your AI
The instructions your AI receives, as published by bidewio/better-openclaw in skills/css-alpha-masking/SKILL.md and read by ahel’s review.
Horizontal (left/right) fade
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
Vertical (top/bottom) fade
mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
Usage checklist
- Apply mask styles directly on element or in CSS class
- Always include both
mask-imageand-webkit-mask-imagefor Safari - Element must have visible content — masks reveal/hide alpha only
Customization knobs
- Direction:
to right,to left,to bottom,to top - Fade depth: Adjust
15%and85%stops - Strength: Change
transparenttorgba(0,0,0,0.2)for softer fades
Tips for AI Agents
- Ask which direction the fade should go.
- Confirm if this is for images, text, or container background.
Signals
- GitHub stars
- 58
- Forks
- 6
- Last commit
- Aug 2026
Advanced
- Item type
- skill
- Key
css-alpha-masking- Source
- github.com/bidewio/better-openclaw
github.com/bidewio/better-openclaw