网格线背景

两组淡线交叉成蓝图网格，科技感的经典垫底

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

代码

<style>
.grid-lines {
  background: #fbfaf7;
  background-image: linear-gradient(#e7e4db 1px, transparent 1px), linear-gradient(90deg, #e7e4db 1px, transparent 1px);
  background-size: 26px 26px;
}
</style>

<div class="bg-[#fbfaf7] bg-[linear-gradient(#e7e4db_1px,transparent_1px),linear-gradient(90deg,#e7e4db_1px,transparent_1px)] [background-size:26px_26px]"></div>

export function GridLines({ children }) {
  return <div style={{ background: "#fbfaf7", backgroundImage: "linear-gradient(#e7e4db 1px, transparent 1px), linear-gradient(90deg, #e7e4db 1px, transparent 1px)", backgroundSize: "26px 26px" }}>{children}</div>;
}

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

两个 linear-gradient（横线、竖线）叠加平铺，线宽 1px、间距 24–32px。想要「蓝图感」可以把线色压得非常淡，再在中心加一团径向高光。注意内容区的对比度：网格只是垫底，正文永远优先。

How it works (English)

Stack two linear-gradients (horizontal and vertical lines), 1px wide at 24–32px intervals. For a blueprint feel keep lines very faint and add a soft radial highlight at the center. Watch content contrast: the grid is a backdrop, body text always wins.

参考与来源 Sources

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

配套提示词

网格线背景 · 提示词待复验 · →