高斯模糊,到底发生了什么?

一根滑杆控制全部三个演示里的 σ。往右拖,看钟形曲线变宽、硬边信号被抹平、色块化成渐变——它们是同一件事。

模糊半径 σ = 12 px

1高斯分布:一张"话语权分配表"

对某个像素做模糊时,它的每个邻居按这条钟形曲线分到一份权重——正下方最大,越远越小。σ 决定钟的宽度,也就是"听多远的邻居的话"。

2一维:硬边色条 → 平滑渐变

上面是原始色条(颜色取自你那张 app 截图的色块),下面是每个位置按高斯权重"平均邻居"之后的结果。在色条上移动鼠标,可以看到那口"钟"罩住了哪些邻居。

模糊前(硬边色块)
模糊后(每个位置 = 邻居的高斯加权平均)
R / G / B 三个通道的信号曲线(虚线 = 模糊前,实线 = 模糊后)
把鼠标移到色条上试试 →

3二维:Figma 的"磨砂玻璃"戏法

下面这块区域就是那张 app 屏的结构:背景照片 + 几个硬边色块 + 一层半透明白色盖板(backdrop-filter: blur(σ))。直接拖动色块——盖板会实时把它们翻译成流动的渐变。

这正是那条 Figma 教程的原理:色块负责"哪里是什么颜色",大 σ 的 background blur 负责抹掉所有硬边、只留下颜色的空间扩散。动画渐变 = 拖动底下的色块,盖板自动把每一帧翻译成新的渐变。