css-alpha-masking
CommunityCreate edge fades with CSS masking.
AuthorZiadNagar
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Masking via CSS mask-image allows designers to fade content, vignette images, and create subtle reveal effects without modifying HTML structure or content.
Core Features & Use Cases
- Edge fades using linear-gradient alpha masks on horizontal directions (left/right).
- Vertical fades and vignette effects to focus attention or indicate scrollability.
- Scroll indicators and decorative masks for UI components across modern browsers.
Quick Start
Apply mask-image with a linear-gradient to create edge fades on any element and tune with CSS variables for responsive results.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: css-alpha-masking Download link: https://github.com/ZiadNagar/zeVillage-AI-Toolkit/archive/main.zip#css-alpha-masking Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.