設計
顆粒漸層靠 SVG 雜訊墊底再把亮度與對比拉高
用 SVG 的 feTurbulence 產生雜訊墊在漸層底下，再用 CSS filter 把亮度和對比拉到極端，灰濁的雜訊就變成乾淨的顆粒。
怎麼做
- 雜訊能讓純色或平滑漸層更真實，但網頁設計很少用。
- 做法：用 SVG 濾鏡產生雜訊，當作背景墊在漸層底下，再拉高亮度與對比。
- 雜訊來源是 SVG 的 feTurbulence 濾鏡，能產生 Perlin 雜訊，可以設定類型與細緻程度。
- SVG 要存成獨立檔案再用 URL 引用。
- 背景寫法是漸層加 SVG 雜訊兩層，順序有講究。
可以怎麼用
圖卡的平塗底色與漸層底色加一層細顆粒，文字層不套 filter，保持邊緣銳利。
可直接複製的素材
.noise {
/* ... */
background:
linear-gradient(to right, blue, transparent),
url(https://grainy-gradients.vercel.app/noise.svg);
}
可直接複製的素材
.noise {
/* ... */
background:
linear-gradient(to right, blue, transparent),
url(https://grainy-gradients.vercel.app/noise.svg);
filter: contrast(170%) brightness(1000%);
}
可直接複製的素材
.noise {
/* ... */
background:
linear-gradient(20deg, rebeccapurple, transparent),
url(https://grainy-gradients.vercel.app/noise.svg);
contrast(170%) brightness(1000%);
}
.overlay {
/* ... */
background: moccasin;
mix-blend-mode: multiply;
}
可直接複製的素材
filter: contrast(145%) brightness(650%) invert(100%); filter: contrast(120%) brightness(900%); filter: contrast(150%) brightness(700%); mix-blend-mode: screen;
注意：作者提醒不同瀏覽器的 mix-blend-mode 不一致。
來源：Jimmy Chion，2021-09-13｜看原文