CSS Alpha Masking Skill
Apply CSS linear-gradient-based alpha masks for horizontal or vertical edge fades using mask-image and -webkit-mask-image.
Views
9
Uses
1
Updated
February 3, 2026
| Property | Value |
|---|---|
| name | css-alpha-masking |
| description | Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients. |
| keywords | css, web-design, visual-design, layout, best-practices |
CSS Alpha Masking Skill
Workflow
- Confirm direction (horizontal or vertical) and fade stop percentages.
- Provide the inline CSS snippet and any needed class usage.
- Offer small tweaks only (direction, stop positions, colors).
Usage checklist
- Apply the mask styles directly on the element or in a CSS class.
- Always include both
mask-imageand-webkit-mask-imagefor Safari. - Ensure the element has visible content; masks reveal/hide alpha only.
Horizontal (left/right) fade
/* Add this inline CSS to any element */
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
/* Add this inline CSS to any element */
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);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.
Common pitfalls
- Forgetting the
-webkit-mask-imagefallback in Safari. - Expecting masks to work on elements with
overflow: hiddenbut no visible content behind.
Questions to ask when specs are missing
- Which direction should the fade go?
- How wide should the fade edges be?
- Is this for images, text, or a container background?