如何仅使用CSS实现多个径向同心圆效果？

你要的这种玻璃态渐变板块完全可以通过CSS原生属性实现，不需要切图，核心用到多重渐变叠加、可选加毛玻璃效果即可，具体实现如下：

基础代码示例 #

HTML结构 #

<div class="target-block">
  <!-- 此处放置板块内部的内容 -->
</div>

CSS样式 #

.target-block {
  /* 基础布局，水平居中 */
  width: 85%;
  max-width: 1000px;
  height: 450px; /* 按需调整尺寸 */
  margin: 50px auto 0;
  border-radius: 18px;
  overflow: hidden;

  /* 核心背景：多层渐变叠加 */
  background: 
    /* 左上角浅蓝渐变，可根据设计调整颜色、范围、透明度 */
    radial-gradient(circle at 0 0, rgba(99, 220, 255, 0.35), transparent 55%),
    /* 右下角粉紫渐变 */
    radial-gradient(circle at 100% 100%, rgba(255, 103, 192, 0.35), transparent 55%),
    /* 半透明白色基底 */
    rgba(255, 255, 255, 0.07);
  
  /* 可选毛玻璃效果，增强质感 */
  backdrop-filter: blur(12px);
  /* 可选细边框，突出轮廓 */
  border: 1px solid rgba(255, 255, 255, 0.12);
}

调整说明 #

• 渐变的颜色、位置、扩散范围、透明度都可以直接修改radial-gradient的参数，匹配你的设计稿效果
• 如果不需要毛玻璃效果，直接删除backdrop-filter属性即可，仅保留渐变背景也能实现对应视觉效果
• 主流现代浏览器均支持上述属性，需要兼容极旧版本浏览器的话，可以额外加一层半透明PNG背景作为降级方案

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