如何用 CSS 实现 Figma 风格的紫黑渐变背景效果-html教程-PHP中文网

如何用 CSS 实现 Figma 风格的紫黑渐变背景效果

本文详解如何通过绝对定位 + 模糊圆形（filter: blur()）在纯 HTML/CSS 中复刻 Figma 作品集中常见的深色背景叠加柔光紫晕效果，无需复杂渐变，兼容性好且易于控制。

本文详解如何通过绝对定位 + 模糊圆形（`filter: blur()`）在纯 html/css 中复刻 figma 作品集中常见的深色背景叠加柔光紫晕效果，无需复杂渐变，兼容性好且易于控制。

在构建现代个人作品集时，许多设计师（如 Figma 社区模板中常见）会采用「深色主背景 + 柔焦彩色光晕」的视觉组合——既保持界面沉稳，又营造出层次感与设计张力。初学者常误以为必须依赖多重 linear-gradient 或 SVG 背景才能实现，但其实更简洁、可控且性能友好的方案是：用一个带高斯模糊的纯色圆形元素作为“光晕层”，叠加在纯色背景之上。

✅ 核心实现逻辑

主背景设为纯黑（如 #121212），奠定整体基调；
创建一个
元素，赋予其紫色（如 rgb(209, 21, 209)）填充；
使用 position: absolute 将其精确定位在视口内（例如 top: 2%; left: -2%）；
关键一步：应用 filter: blur(100px) —— 这会使颜色向外柔和弥散，形成自然光晕；
确保该元素层级高于内容（可加 z-index: -1 或置于开头，避免遮挡正文）。

? 完整示例代码



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Purple-Black Portfolio Background</title><style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #121212; /* 深灰黑主背景 */
      min-height: 100vh;
      font-family: system-ui, -apple-system, sans-serif;
      position: relative;
      overflow-x: hidden;
    }

    .purple-circle {
      position: absolute;
      top: 2%;
      left: -2%;
      width: 300px;
      height: 300px;
      background-color: rgb(209, 21, 209); /* 饱和紫 */
      filter: blur(100px);
      z-index: -1; /* 确保不遮挡内容 */
    }

    /* 可选：添加内容区域示意 */
    main {
      padding: 4rem 2rem;
      color: white;
      text-align: center;
    }
  </style><div class="purple-circle"></div>
  <main><h1>My Portfolio</h1>
    <p>A clean, modern layout with subtle ambient lighting.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </main>

⚠️ 注意事项与调优建议

模糊强度调节：blur() 值越大，光晕越扩散、越柔和；建议在 60px–150px 区间微调，过高可能导致边缘溢出明显（可通过 overflow: hidden 在容器上限制）；
定位灵活性：top/left 可改为 bottom/right，或使用 transform: translate(-50%, -50%) 配合 inset 实现中心偏移光晕；

响应式适配：对小屏幕，可结合媒体查询缩小圆尺寸或调整 blur 值，例如：

@media (max-width: 768px) {
  .purple-circle {
    width: 200px;
    height: 200px;
    filter: blur(70px);
    top: 5%;
    left: -5%;
  }
}

性能提示：filter: blur() 在低端设备上可能轻微影响渲染性能，若页面滚动卡顿，可考虑降级为静态 PNG 光晕图（但牺牲了灵活性）。

这种方案不仅语义清晰、代码轻量，还便于后续扩展——比如添加多个不同颜色/位置的模糊圆，模拟多光源氛围；或配合 @keyframes 实现缓慢飘移动画，增强动态感。掌握它，你就拥有了打造专业级背景质感的第一把钥匙。