Noise Texture

A whisper of grain over flat color kills the plastic look

All platformsMotion & BackgroundsContent areaEffect

Live preview (drag the parameters, watch it change)

Code

<div class="noise"></div>
<style>
.noise {
  background: #eceae5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
</style>

<div class="bg-[#eceae5] bg-[image:url('data:image/svg+xml,...')]"></div>
<!-- data URI 太长，Tailwind 里建议把噪点图存成 noise.svg 文件再 bg-[url(/noise.svg)] -->

export function Noise({ children }) {
  return <div style={{ background: "#eceae5", backgroundImage: `url("data:image/svg+xml,...")` }}>{children}</div>;
}
/* 噪点 SVG 与 html-css 档相同；slope 控制浓淡 */

Code snippets are MIT-licensed — copy and adapt freely.

How this effect works

它是怎么工作的（中文）

用 SVG 的 feTurbulence 滤镜生成一张噪点图，透明度压到 0.1 上下平铺在背景上。大脑会把这层颗粒读成「材质」，扁平色立刻有了纸感。噪点太粗或太浓会显脏——slope（强度）宁小勿大，而且它应该是若有似无的那一层。

How it works (English)

Generate a noise tile with SVG's feTurbulence filter, keep its alpha around 0.1, and tile it over the background. The brain reads grain as material, so flat color suddenly feels like paper. Too coarse or too strong looks dirty — keep the intensity low; the layer should be barely there.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

Matching prompt

Noise Texture PromptStale · →