BACKGROUND & DECOR
网格淡出光晕Grid Fade + Top Glow
网格从顶部渐隐消失，顶部再压一团品牌色光晕——SaaS Hero 的标配背景。
效果预览
网格 + 顶部光晕 + 向下渐隐
适合用在哪
SaaS 首屏、功能页顶部、博客头部。
容易踩的坑
- mask-image 在旧版 Safari 需要 -webkit- 前缀，漏写会显示满屏网格。
- 光晕饱和度过高时，压在上面的灰色副标题对比度会跌到 3:1 以下。
- 网格渐隐终点太靠下，首屏下半部依旧杂乱，失去聚焦标题的意义。
设计提示词 · Prompt
网格淡出光晕（Grid Fade + Top Glow）：网格层用 mask-image:radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 78%)——网格只在顶部可见、向下渐隐；再叠一团品牌色光晕（radial-gradient + blur，宽 50-70%、位于顶部中央）从网格缝隙透出。内容（Eyebrow + 标题）压在光晕中心。这个组合是 Linear/Vercel 系 Hero 的通用公式：网格给秩序感、光晕给能量感、渐隐给纵深。深浅两版都能用。
Grid Fade + Top Glow: Give the grid layer mask-image: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 78%) — the grid is visible only at the top and fades out downward; then layer a brand-color glow (radial-gradient + blur, 50-70% wide, top center) shining through the grid gaps. Content (Eyebrow + headline) sits at the center of the glow. This combo is the universal formula for Linear/Vercel-style heroes: the grid gives order, the glow gives energy, the fade gives depth. Works in both light and dark versions.
常见搭配
同一页面里经常和「网格淡出光晕」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-gridfade"> <div class="d-gridfade__g"></div> <div class="d-gridfade__glow"></div> <b>网格 + 顶部光晕 + 向下渐隐</b> </div>