如何实现页面背景的左右对称渐变效果？

你不需要额外创建两个div，直接调整linear-gradient的颜色节点就能实现中心浅蓝、左右对称过渡到深蓝的效果：

修改body的background属性，使用多颜色节点的线性渐变，将中间颜色的位置设为容器水平中心（50%处），左右两侧使用相同的深蓝色即可：

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* 对称渐变：左侧深蓝 -> 中心浅蓝 -> 右侧深蓝 */
  background: linear-gradient(to right, #162ba4, #3498db 50%, #162ba4);
}

.main-container {
  padding: 20px;
  background: rgba(244, 228, 228, 0.532);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

原理说明 #

• 渐变语法中，每个颜色值后可添加位置参数（如这里的50%），表示该颜色在容器宽度的对应位置达到最深色
• 左右两侧用相同的深蓝色#162ba4，中间用浅蓝色#3498db，自然形成对称过渡
• 该方案完全基于CSS背景实现，不会新增DOM元素，对后续布局无任何影响

如果想要更柔和的过渡效果，可以扩大中间浅蓝区域的范围：

background: linear-gradient(to right, #162ba4, #3498db 40%, #3498db 60%, #162ba4);

内容的提问来源于stack exchange，提问作者Michał Leśko