网格背景（Grid Background）是什么：效果预览与 AI 设计提示词

效果预览

中央淡出 · 边缘可见网格

适合用在哪

开发者工具、设计产品、技术博客、AI 产品。

容易踩的坑

网格线对比度过高（深于 #D0D2DC）会与正文抢视线，读者盯着格子而不是内容。
background-size 不是整数像素时，高分屏上线条会粗细不一甚至闪烁。
忘了做中心淡出蒙版，满屏网格让标题区和边缘一样嘈杂、没有焦点。

设计提示词 · Prompt

网格背景（Grid Background）：两层 linear-gradient 画十字线——linear-gradient(#E6E7EE 1px, transparent 1px) 横竖各一层、background-size:24-32px 正方形。中心内容区用 radial-gradient 透明→背景色做淡出蒙版，网格只在边缘可见，焦点自然落到中央内容上。变体：背景色极浅蓝（#FAFBFF）更有"蓝图"感；深色版用 rgba(255,255,255,.06) 做线。与技术感组件（代码块、终端窗口）是绝配。

Grid Background: Draw crosshair lines with two linear-gradient layers — linear-gradient(#E6E7EE 1px, transparent 1px), one horizontal and one vertical — with background-size: 24-32px squares. Over the central content area, use a radial-gradient fading from transparent to the background color as a fade-out mask, so the grid is only visible at the edges and focus naturally lands on the central content. Variants: a very light blue background (#FAFBFF) for a stronger "blueprint" feel; a dark version uses rgba(255,255,255,.06) for the lines. A perfect match for technical components (code blocks, terminal windows).

常见搭配

同一页面里经常和「网格背景」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

居中英雄区Centered Hero 行内代码与代码块Inline Code & Code Block 眉题标签Eyebrow / Kicker 吸顶模糊导航Sticky Blur Header

演示 HTML 结构

<div class="s s--abs d-gridbg">
  <b>中央淡出 · 边缘可见网格</b>
</div>