CSS实现多层盒子颜色混合效果的技术咨询

问题描述 #

出于兴趣做网站，想实现4个分层盒子相互融合的视觉效果，但不知道怎么操作。试过用linear-gradient效果不好，Youtube上也没找到相关方法，希望首页能显示每个盒子，且它们呈现自然的混合效果。

现有代码 #

HTML

<div class="box-container"> 
  <div class="box1"></div> 
  <div class="box2"></div> 
  <div class="box3"></div> 
  <div class="box4"></div> 
</div>

CSS

.box2 { 
  position: absolute; 
  background-color: #333333; 
  border-radius: 15px; 
  left: 45px; 
  top: 30px; 
  width: 1750px; 
  height: 870px; 
  background: linear-gradient(to bottom right, #1a1a1a, #333333); 
} 
.box3 { 
  position: absolute; 
  background-color: #4d4d4d; 
  border-radius: 15px; 
  left: 150px; 
  top: 125px; 
  width: 1500px; 
  height: 700px; 
  background: linear-gradient(to bottom right, #333333, #4d4d4d); 
} 
.box4 { 
  position: absolute; 
  background-color: #666666; 
  border-radius: 15px; 
  left: 250px; 
  top: 250px; 
  width: 1300px; 
  height: 450px; 
  background: linear-gradient(to bottom right, #4d4d4d, #666666); 
}

解决方案 #

试试这几个方法，能实现盒子间的自然融合效果：

1. 半透明背景 + 模糊滤镜 #

给内层盒子加半透明背景和模糊滤镜，让下层盒子的颜色透上来并自然模糊融合，同时保留每个盒子的轮廓：

/* 先给容器设置相对定位，确保子盒子基于它定位 */
.box-container {
  position: relative;
  width: fit-content;
  height: fit-content;
}

/* 补全box1的样式，保持层级一致 */
.box1 {
  position: absolute;
  border-radius: 15px;
  left: 0;
  top: 0;
  width: 1900px;
  height: 950px;
  background: linear-gradient(to bottom right, #000000, #1a1a1a);
}

.box2 { 
  position: absolute; 
  border-radius: 15px; 
  left: 45px; 
  top: 30px; 
  width: 1750px; 
  height: 870px; 
  background: rgba(26, 26, 26, 0.8); /* 半透明背景 */
  backdrop-filter: blur(8px); /* 模糊下层内容 */
} 
.box3 { 
  position: absolute; 
  border-radius: 15px; 
  left: 150px; 
  top: 125px; 
  width: 1500px; 
  height: 700px; 
  background: rgba(68, 68, 68, 0.8);
  backdrop-filter: blur(8px);
} 
.box4 { 
  position: absolute; 
  border-radius: 15px; 
  left: 250px; 
  top: 250px; 
  width: 1300px; 
  height: 450px; 
  background: rgba(102, 102, 102, 0.8);
  backdrop-filter: blur(8px);
}

2. 使用混合模式让颜色自动融合 #

通过mix-blend-mode设置盒子的颜色混合规则，让相邻盒子的色彩自然叠加融合，可尝试不同混合模式找到最佳效果：

.box-container {
  position: relative;
  background: #000; /* 给容器加基础背景，混合效果更明显 */
}

.box1 {
  position: absolute;
  border-radius: 15px;
  left: 0;
  top: 0;
  width: 1900px;
  height: 950px;
  background: linear-gradient(to bottom right, #000000, #1a1a1a);
}

.box2 { 
  position: absolute; 
  border-radius: 15px; 
  left: 45px; 
  top: 30px; 
  width: 1750px; 
  height: 870px; 
  background: linear-gradient(to bottom right, #1a1a1a, #333333);
  mix-blend-mode: overlay; /* 混合模式，可换成soft-light/multiply等 */
} 
.box3 { 
  position: absolute; 
  border-radius: 15px; 
  left: 150px; 
  top: 125px; 
  width: 1500px; 
  height: 700px; 
  background: linear-gradient(to bottom right, #333333, #4d4d4d);
  mix-blend-mode: overlay;
} 
.box4 { 
  position: absolute; 
  border-radius: 15px; 
  left: 250px; 
  top: 250px; 
  width: 1300px; 
  height: 450px; 
  background: linear-gradient(to bottom right, #4d4d4d, #666666);
  mix-blend-mode: overlay;
}

3. 渐变边缘过渡弱化边界 #

给盒子添加渐变透明边缘，让边界自然过渡，避免生硬的线条：

.box2 { 
  position: absolute; 
  border-radius: 15px; 
  left: 45px; 
  top: 30px; 
  width: 1750px; 
  height: 870px; 
  background: linear-gradient(to bottom right, #1a1a1a, #333333);
  /* 内阴影模拟边缘渐变过渡 */
  box-shadow: inset 0 0 40px rgba(0,0,0,0.2);
} 
.box3 { 
  position: absolute; 
  border-radius: 15px; 
  left: 150px; 
  top: 125px; 
  width: 1500px; 
  height: 700px; 
  background: linear-gradient(to bottom right, #333333, #4d4d4d);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.2);
} 
.box4 { 
  position: absolute; 
  border-radius: 15px; 
  left: 250px; 
  top: 250px; 
  width: 1300px; 
  height: 450px; 
  background: linear-gradient(to bottom right, #4d4d4d, #666666);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.2);
}

也可以用mask实现更精细的边缘渐变：

.box2 {
  /* 其他样式不变 */
  -webkit-mask: linear-gradient(135deg, transparent 10px, #fff 10px);
  mask: linear-gradient(135deg, transparent 10px, #fff 10px);
}

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