設計
用位移圖加顆粒，漸層的顏色不會被疊雜訊弄髒
疊雜訊圖會讓漸層變暗、變亮或變艷；改成把雜訊當位移圖，打散漸層自己的像素，顆粒就不會改變原本的顏色。
怎麼做
- 問題是漸層常出現難看的色階斷層。
- 常見解法有兩種：多放色標做緩動，或讓漸層帶雜訊。
- 作者早期用雜訊層與漸層層混合，後來覺得太複雜。
- 另一篇文章的做法靠一端透明讓雜訊透出，拉高對比與亮度，只適用部分漸層，並且大幅改變原漸層的飽和度與明度。
- 所有疊雜訊的做法的共同問題：會改變漸層，結果更暗、更亮或更艷。
可以怎麼用
日出暗色漸層底的色階斷層，用位移濾鏡處理背景層，文字另放一層。
可直接複製的素材
(.5 - C)*S dx = (.5 - R)*S dy = (.5 - A)*S
可直接複製的素材
<svg width='0' height='0' aria-hidden='true'> <feTurbulence type='fractalNoise' baseFrequency='.9713' numOctaves='4'/> <feDisplacementMap in='SourceGraphic' scale='150' xChannelSelector='R'/> <feBlend in2='SourceGraphic'/> </svg>
可直接複製的素材
.grad-box {
background: linear-gradient(90deg, #a9613a, #1e1816);
clip-path: inset(0);
filter: url(#grain)
}
可直接複製的素材
.grad-box { /* relevant styles */
positon: relative; /* needed for absolutely positioned pseudo */
box-shadow: -2px 2px 8px #000;
&::before {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, #a9613a, #1e1816);
filter: url(#grain);
clip-path: inset(0);
content: '' /* pseudo won't show up without it */
}
}
可直接複製的素材
.grad-box { /* relevant styles */
box-shadow: -2px 2px 8px #000;
background: filter(linear-gradient(90deg, #a9613a, #1e1816), url(#grain));
}
注意：filter() 函式只有 Safari 支援。
來源：Master.dev 部落格，2025-06-13｜看原文