Skip to content
Get packs

CSS Alpha Masking

Adds soft CSS gradient fades to element edges using mask-image, with Safari support.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When installed, the agent can write CSS that fades the left/right or top/bottom edges of an element to transparent using a linear gradient mask. It includes the -webkit-mask-image prefix so the effect also works in Safari, and it can adjust fade direction, depth, and strength on request. It only produces CSS snippets and asks clarifying questions; it does not run code or touch external services.

Great for

  • Front-end developers who want a scrolling list or image strip to fade out at its edges
  • Designers prototyping soft edge fades on images, text, or containers without extra image assets

Skip it if

  • Projects needing support for very old browsers without mask-image support, since the skill only adds the standard and -webkit- prefixed versions
  • Cases where the element has no visible content behind the mask, because the mask only reveals or hides existing alpha and the skill's own pitfalls section warns the effect will not show

Try asking

  • “Add a fade on the top and bottom edges of this scrolling feed container”
  • “Give this hero image a soft left-to-right fade into the background color”
  • “Create a CSS mask so the text block fades out at the bottom, Safari included”
Step-by-step guide: how to use CSS Alpha MaskingInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    css-alpha-masking.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip css-alpha-masking.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip css-alpha-masking.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Specify the fade direction and how wide the fade edges should be (for example 10% versus 25%) so the output needs no revision.
  • Say whether the target is an image, text, or a container background, since the skill asks this and the result depends on it.
  • Test the output in Safari and a second browser, and check that the element has visible content behind the mask.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.