css-alpha-masking

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.

Jump to install Review files

Repository: MengTo/Skills
Last source activity: July 18, 2026 at 10:18
Detected SKILL.md language: English
Stars: 6,786
Forks: 793

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/css-alpha-masking.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/MengTo/Skills --skill css-alpha-masking

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

4 files

SKILL.md

Source instructions · Read-only preview

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.

# CSS Alpha Masking Skill ## Workflow 1. Confirm direction (horizontal or vertical) and fade stop percentages. 2. Provide the inline CSS snippet and any needed class usage. 3. 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 ```css /* 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 ```css /* 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?

View on GitHub

Back to search Back to installation

illustration-bold-pop

Draws hand-authored SVG spot illustrations in a bold pop-geometric style for design and coding scenes. Identifying traits: a thick navy outline on every shape, solid navy extrusions that always step down-right, saturated flat fills (hot pink, lemon, aqua, violet, mint, lime) textured with navy hatching and dots, and a dense overlapping cluster of chunky props (browser windows, pinwheel tiles, iso cubes, lightning bolts) around one slim cartoon character. Covers palette, line weights, extrusion and union-outline techniques, a JS helper for the repeated marks, characters and hands, composition and a render-and-critique loop. Use when someone asks for bold pop, pop geometric, retro pop, memphis-style, navy-outline, chunky outlined or loud colourful illustrations, or for empty states, onboarding, 404 or error pages, blog headers, feature spots and marketing cards in that look.

2026-10-06

illustration-flat

Draws flat vector illustrations as SVG cards (480x360): slim, long-limbed people acting out one design or coding moment with one hero prop. Identified by no outlines on big shapes, thin white fold strokes as the only shading, navy only for hair, sneakers and a few hairlines, small heads (about 1:7) with big hands and white sneakers, and sparse floating confetti with no ground line, in lavender, indigo, sunshine yellow, coral and mint. Covers the measured palette, stroke numbers, character construction (tapered limbs, separated fingers, thumb side), poses, props, composition and a tested parts kit. Use when asked for flat illustrations, flat vector people, outline-free or no-outline characters, modern or corporate flat art, empty states, onboarding screens, 404 or error pages, coming-soon pages, blog headers, feature spots or marketing cards.

2026-10-06

illustration-flat-with-black

Draws flat vector spot illustrations of tall, long-legged people doing design and coding things, with solid black as a main colour. Traits: no outlines on coloured fills; black as big solid shapes (hair, trousers, shoes, devices) and as thin detail lines; denim blue, leaf green, sun yellow and tomato red on cream skin; dot eyes, round glasses and blush; big shoes on one thin black ground line; two stars and two plus-sparkles as the only decor. Covers palette, line weights, characters, heads, hands, props, composition and a parts helper for limbs, shoes, heads, hands and paper props. Use when someone asks for flat illustration with black, flat people or character illustration, friendly product or SaaS illustration, or art for empty states, onboarding, 404 and error pages, blog headers, feature spots, marketing cards or app screens in this style.

2026-10-06

View all from this repository

css-alpha-masking

Source facts

Install options

Install with an AI assistant

Review the source files

More from this repository

Install with an AI assistant

More from this repository