Sketch教程：液态玻璃、玻璃效果与渐变模糊、不透明度渐变

Sketch2025.2版本增加了玻璃效果，以适配全新iOS26的设计风格。使用这个的方法很简单。以我做的一个封面为例子。

我们可以看到背景的圆球有一个玻璃的光学形变。

在之前的版本几乎是不可能做到，必须要使用Photoshop进行处理，不过现在你可以在Sketch中直接完成。

添加玻璃效果

选中要变成玻璃的图层，然后在右侧添加玻璃效果。

玻璃效果为所选元素添加磨砂玻璃的视觉效果。这将创建一种半透明、模糊的外观，微妙地展现背景，同时保持对前景内容的关注。

玻璃效果有两种设置：

• 自动： 将毛玻璃的基本外观应用于元素。
• 自定义： 让您完全控制形成效果的所有参数。

其中“自动”是接近iOS26的玻璃效果。

通过自定义，您可以控制：

• Blur 模糊
• Distortion 失真
• Depth 深度
• Chromatic Aberration 色差
• Brightness 亮度
• Saturation 饱和
• Specular Highlights 镜面高光

自动效果如下：

自定义效果调整样式：

是不是很简单？赶紧试试吧。

渐变模糊

我们之前制作从模糊到清晰的渐变一般使用背景模糊+alpha蒙版，现在，你可以直接在背景模糊中设置渐变模糊了。

你可以观察到从1到3是一个由模糊变清晰的过程。

只需要选中需要添加渐变模糊的图层，然后添加背景模糊，选择渐变模糊效果即可。

官方的例子效果还是比较惊艳的。

不透明度渐变

以前不透明度只能调整整体的数值，或者实现透明度渐变效果就需要设置alpha蒙版，现在，你可以直接在检查器中使用透明度渐变。

我们可以看到不透明度右侧增加了一个渐变的图标，点击就可以快速设置透明度渐变了。

并且支持添加和删除锚点。