如何用CSS创建多色"自由流动"渐变背景

要实现你想要的效果，核心是通过多层线性渐变叠加配合background-blend-mode: screen来实现柔和的多色混合。以下是针对你给出的五种颜色的具体实现方案：

完整代码实现 #

.free-flow-gradient {
  width: 100vw;
  height: 100vh;
  /* 按目标效果定位五种颜色的渐变 */
  background:
    /* 颜色A：浅灰，覆盖基础区域 */
    linear-gradient(135deg, #ecedee 0%, transparent 65%),
    /* 颜色B：暖黄，从右下向中心渐变 */
    linear-gradient(45deg, #fff0be 0%, transparent 65%),
    /* 颜色C：柔粉，从右上向中心渐变 */
    linear-gradient(-45deg, #fbdce7 0%, transparent 65%),
    /* 颜色D：淡绿，从左下向中心渐变 */
    linear-gradient(-135deg, #e2fae1 0%, transparent 65%),
    /* 颜色E：紫灰，从左上向中心渐变 */
    linear-gradient(180deg, #d3d5ed 0%, transparent 65%);
  /* 关键：使用screen混合模式实现明亮的颜色叠加 */
  background-blend-mode: screen;
}

关键细节说明 #

• 渐变角度与范围：每个linear-gradient通过角度控制颜色的起始方向（比如45deg对应右下→左上），transparent 65%设置颜色的透明终止点，避免生硬的边界，让颜色自然过渡融合。
• 混合模式：screen混合模式会让叠加的颜色呈现出明亮的混合效果，正好匹配目标图中柔和通透的“自由流动”质感。
• 调整技巧：如果需要调整某颜色的覆盖范围，只需修改对应渐变的透明终止百分比（比如把65%改成75%会让颜色覆盖更大区域）；调整角度则可以改变颜色的分布方向。

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