如何实现带渐隐效果的网格方块背景？

你的基础网格已经用conic-gradient实现了，要加渐隐效果，有两种简单可行的方案：

方案1：用CSS Mask实现精准渐隐 #

通过mask属性给网格加一个渐变遮罩，控制网格的可见度过渡，兼容性较好：

.grid-bg {
  width: 100%;
  height: 400px;
  /* 你的基础网格背景 */
  background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,grey 0) 0 0/50px 50px;
  /* 从上到下渐隐，可修改方向如to right/to bottom right */
  mask: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); /* 兼容webkit内核 */
}

• 想调整渐隐范围？可以给渐变加百分比控制，比如linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0))，前30%区域网格完全显示，之后开始渐隐。
• 换方向直接改to bottom为to top/to left即可。

方案2：叠加渐变背景（无需Mask） #

如果担心mask的兼容性，也可以直接在网格上叠加一层和页面背景色一致的渐变，模拟渐隐：

.grid-bg {
  width: 100%;
  height: 400px;
  background: 
    /* 上层渐变遮罩，#fff替换成你的页面背景色 */
    linear-gradient(to bottom, transparent, #fff),
    /* 下层网格背景 */
    conic-gradient(from 90deg at 1px 1px,#0000 90deg,grey 0) 0 0/50px 50px;
}

原理是渐变层从透明过渡到页面背景色，逐渐覆盖网格，实现渐隐效果，适合背景色固定的场景。

额外自定义技巧 #

• 调整网格颜色：把grey换成#e5e7eb这类浅色调，适配浅色页面。
• 修改网格大小：调整50px 50px的值，比如30px 30px得到更密集的网格。

内容的提问来源于stack exchange，提问作者lemon-apples