css-alpha-masking

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

CSS Alpha Masking Skill

CSS Alpha Masking 技巧

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

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

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

直接在元素上或CSS类中应用遮罩样式
针对Safari浏览器，务必同时包含
```
mask-image
```
和
```
-webkit-mask-image
```
元素必须有可见内容——遮罩仅控制透明度的显示/隐藏

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

方向：
```
to right
```
、
```
to left
```
、
```
to bottom
```
、
```
to top
```
渐变深度：调整
```
15%
```
和
```
85%
```
的渐变停止点
渐变强度：将
```
transparent
```
改为
```
rgba(0,0,0,0.2)
```
可实现更柔和的渐变效果

Tips for AI Agents

给AI Agent的提示

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

询问用户渐变的方向。
确认该效果是用于图片、文本还是容器背景。