Dot Grid Background

Evenly spaced dots tile the background — graph paper for the eye

All platformsMotion & BackgroundsContent areaEffect

Live preview (drag the parameters, watch it change)

Code

<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>;
}

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

How this effect works

它是怎么工作的（中文）

一行 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 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

Matching prompt

Dot Grid Background PromptStale · →