两个重叠半透明元素的backdrop-filter模糊效果实现问题

核心思路是将两个重叠圆形合并为单个容器的裁剪形状，通过**单个容器应用backdrop-filter**避免多元素叠加导致的颜色异常，同时用CSS Mask实现双圆形的动态形状，支持动画移动。

实现步骤 #

1. 创建容器并设置基础样式
   容器尺寸根据需求定义，直接给容器添加backdrop-filter和半透明背景色（用rgba而非opacity，避免影响滤镜生效）：

   .blur-circles {
     position: fixed; /* 根据布局调整定位方式 */
     width: 400px;
     height: 400px;
     backdrop-filter: blur(12px);
     background-color: rgba(240, 240, 240, 0.3); /* 替换为你需要的半透明颜色 */
   }
   

2. 用CSS Mask定义双圆形形状
   通过多层径向渐变生成两个圆形遮罩，使用mask-composite合并形状（兼容不同浏览器）：

   .blur-circles {
     /* 续上 */
     mask: 
       radial-gradient(circle at 120px 120px, black 60px, transparent 61px),
       radial-gradient(circle at 280px 280px, black 60px, transparent 61px);
     /* 兼容Chrome/Safari */
     -webkit-mask-composite: source-over;
     /* 兼容Firefox */
     mask-composite: add;
   }
   

   调整at 120px 120px的坐标值可改变圆形位置，60px为圆形半径，按需修改即可。

3. 添加相对移动动画
   通过动画修改遮罩中两个圆形的坐标，实现相对移动效果：

   @keyframes move-circles {
     0% {
       mask: 
         radial-gradient(circle at 120px 120px, black 60px, transparent 61px),
         radial-gradient(circle at 280px 280px, black 60px, transparent 61px);
       -webkit-mask: 
         radial-gradient(circle at 120px 120px, black 60px, transparent 61px),
         radial-gradient(circle at 280px 280px, black 60px, transparent 61px);
     }
     50% {
       mask: 
         radial-gradient(circle at 280px 120px, black 60px, transparent 61px),
         radial-gradient(circle at 120px 280px, black 60px, transparent 61px);
       -webkit-mask: 
         radial-gradient(circle at 280px 120px, black 60px, transparent 61px),
         radial-gradient(circle at 120px 280px, black 60px, transparent 61px);
     }
     100% {
       mask: 
         radial-gradient(circle at 120px 120px, black 60px, transparent 61px),
         radial-gradient(circle at 280px 280px, black 60px, transparent 61px);
       -webkit-mask: 
         radial-gradient(circle at 120px 120px, black 60px, transparent 61px),
         radial-gradient(circle at 280px 280px, black 60px, transparent 61px);
     }
   }
   
   .blur-circles {
     /* 续上 */
     animation: move-circles 4s ease-in-out infinite;
   }
   

方案优势 #

• 解决重叠区域颜色异常：单个容器的半透明背景色统一，不会出现多元素opacity叠加导致的颜色加深。
• 保证backdrop-filter正常生效：未使用会干扰滤镜的父元素opacity或额外filter属性。
• 支持动态动画：仅修改遮罩坐标即可实现圆形相对移动，性能优于Canvas/SVG的位图重绘方案。
• 无多余边缘模糊：遮罩精确匹配圆形形状，滤镜仅作用于圆形区域内。

兼容性说明 #

• CSS Mask在Chrome 87+、Firefox 70+、Safari 15.4+均支持，可添加前缀兼容旧版浏览器。
• backdrop-filter已被主流浏览器支持，无需额外前缀。

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