如何实现类似tailwindcss.com的模糊渐变背景？

Tailwind CSS 官网的背景核心是多层CSS背景叠加，结合渐变、重复线条和装饰斑点实现，以下是具体实现步骤和代码：

核心实现思路 #

通过多层background-image叠加，从底层到顶层依次是：深色底色 → 装饰斑点 → 横向网格线 → 纵向网格线 → 顶层渐变，每层通过透明度控制视觉层次感。

完整代码示例 #

给目标容器（比如body或页面主容器）添加以下CSS样式：

.tailwind-bg {
  /* 基础底色 */
  background-color: #0f172a;
  /* 多层背景叠加，顺序从后到前 */
  background-image:
    /* 1. 装饰斑点：低透明度白色小圆点，重复排列 */
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    /* 2. 横向网格线：间隔25px的细线条 */
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 24px,
      rgba(255, 255, 255, 0.03) 24px,
      rgba(255, 255, 255, 0.03) 25px
    ),
    /* 3. 纵向网格线：间隔25px的细线条 */
    repeating-linear-gradient(
      to right,
      transparent,
      transparent 24px,
      rgba(255, 255, 255, 0.03) 24px,
      rgba(255, 255, 255, 0.03) 25px
    ),
    /* 4. 顶层渐变：增强背景的深度感 */
    linear-gradient(to bottom right, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 1));
  
  /* 对应每层背景的尺寸 */
  background-size:
    50px 50px,   /* 斑点的重复间距 */
    100% 25px,   /* 横向网格的高度 */
    25px 100%,   /* 纵向网格的宽度 */
    100% 100%;
  
  /* 背景定位 */
  background-position: center center;
}

自定义调整建议 #

• 颜色：把#0f172a、rgba(255,255,255,0.05)等值换成你需要的配色，比如浅色背景可以降低线条/斑点的透明度，或者用深色线条。
• 网格间距：修改25px、50px等值可以调整网格和斑点的密度。
• 动态效果：如果需要滚动时的细微偏移，可以用JavaScript监听scroll事件，调整background-position的值，比如：

  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    document.querySelector('.tailwind-bg').style.backgroundPosition = `center ${scrollY * 0.1}px`;
  });
  

内容的提问来源于stack exchange，提问作者Muhammad Ramazan