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-image and -webkit-mask-image for 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% and 85% stops.
- Strength: change
transparent to rgba(0,0,0,0.2) for softer fades.
Common pitfalls
- Forgetting the
-webkit-mask-image fallback in Safari.
- Expecting masks to work on elements with
overflow: hidden but 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?
1---2name: css-alpha-masking3description: 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.4---56# CSS Alpha Masking Skill78## Workflow91. Confirm direction (horizontal or vertical) and fade stop percentages.102. Provide the inline CSS snippet and any needed class usage.113. Offer small tweaks only (direction, stop positions, colors).1213## Usage checklist14- Apply the mask styles directly on the element or in a CSS class.15- Always include both `mask-image` and `-webkit-mask-image` for Safari.16- Ensure the element has visible content; masks reveal/hide alpha only.1718## Horizontal (left/right) fade19```css20/* Add this inline CSS to any element */21mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);22-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);23```2425## Vertical (top/bottom) fade26```css27/* Add this inline CSS to any element */28mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);29-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);30```3132## Customization knobs33- Direction: `to right`, `to left`, `to bottom`, `to top`.34- Fade depth: adjust `15%` and `85%` stops.35- Strength: change `transparent` to `rgba(0,0,0,0.2)` for softer fades.3637## Common pitfalls38- Forgetting the `-webkit-mask-image` fallback in Safari.39- Expecting masks to work on elements with `overflow: hidden` but no visible content behind.4041## Questions to ask when specs are missing42- Which direction should the fade go?43- How wide should the fade edges be?44- Is this for images, text, or a container background?
Meng To