点阵背景
等距小圆点铺满背景，像方格纸一样的隐形坐标系
全平台通用动效与背景内容区效果
实时预览（拖动参数，立刻看变化）
代码
<style>
.dot-grid {
background: #fbfaf7;
background-image: radial-gradient(#c9c6bf 1.3px, transparent 1.4px);
background-size: 18px 18px;
}
</style><div class="bg-[#fbfaf7] bg-[radial-gradient(#c9c6bf_1.3px,transparent_1.4px)] [background-size:18px_18px]"></div>export function DotGrid({ children }) {
return <div style={{ background: "#fbfaf7", backgroundImage: "radial-gradient(#c9c6bf 1.3px, transparent 1.4px)", backgroundSize: "18px 18px" }}>{children}</div>;
}代码片段以 MIT 释出，可自由复制改用。
这个效果是怎么实现的
它是怎么工作的（中文）
一行 radial-gradient 就能画：一个小圆点 + 透明，background-size 决定间距，平铺即成。点阵的妙处是「有秩序但不抢戏」，设计工具和开发者向产品特别爱用它。点的颜色比背景深一档就够，别更深。
How it works (English)
One radial-gradient does it: a small dot plus transparency, tiled at a background-size interval. Dot grids feel ordered without stealing attention, which is why design tools and dev products love them. Make dots just one shade darker than the background — no more.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。