css-alpha-masking

Original：🇺🇸 English

Translated

Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades using mask-image and -webkit-mask-image. Use for fade edges, alpha masks, or CSS mask gradients.

1installs

Sourcebidewio/better-openclaw

Added on2026-04-19

NPX Install

npx skill4agent add bidewio/better-openclaw css-alpha-masking

SKILL.md Content

View Translation Comparison →

CSS Alpha Masking Skill

Horizontal (left/right) fade

css

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

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);

Usage checklist

Apply mask styles directly on element or in CSS class
Always include both
```
mask-image
```
and
```
-webkit-mask-image
```
for Safari
Element must have visible content — masks reveal/hide alpha only

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

Tips for AI Agents

Ask which direction the fade should go.
Confirm if this is for images, text, or container background.