如何用CSS实现类似日落照片的渐变背景效果？

当然可以用CSS模拟日落天空的渐变效果，你之前的代码效果不理想，主要是渐变方向、颜色过渡逻辑和透明度设置没贴合日落的真实光影层次。

原代码的问题分析 #

• 渐变方向to bottom left不符合日落天空从上到下（或从太阳核心向外扩散）的自然色彩分布；
• 颜色节点平均分布，没有体现出日落时「核心暖色调集中、边缘冷色调过渡」的特点；
• 透明度设置过于单一，没能模拟天空不同区域的明暗通透感。

改进后的CSS实现方案 #

下面的代码结合径向渐变（模拟太阳霞光）和线性渐变（模拟天空主色调），更贴近真实日落天空的效果：

body {
  margin: 0;
  min-height: 100vh;
  background: 
    /* 模拟太阳位置的暖光扩散，可调整at后的数值改变太阳位置 */
    radial-gradient(
      circle at 75% 15%, 
      rgba(255, 210, 130, 0.8) 0%, 
      rgba(255, 160, 110, 0.6) 25%, 
      transparent 55%
    ),
    /* 天空从上到下的主渐变层次 */
    linear-gradient(
      to bottom,
      rgba(75, 80, 115, 1) 0%,          /* 顶部冷灰蓝 */
      rgba(215, 175, 205, 0.9) 35%,     /* 中部粉紫过渡 */
      rgba(255, 225, 175, 0.8) 70%,     /* 下部暖黄渐变 */
      rgba(255, 240, 215, 0.6) 100%     /* 底部浅黄通透感 */
    );
}

调试建议（更贴近你的照片效果） #

• 提取照片颜色：用取色工具从你的日落照片中，提取顶部天空、中部过渡区、日落核心区、底部天空的关键颜色；
• 调整渐变位置：修改radial-gradient里的at 75% 15%数值，对应照片中太阳的实际位置；
• 优化过渡节点：根据照片里各颜色区域的占比，调整linear-gradient中各颜色的百分比，让过渡更贴合原图；
• 微调透明度：针对不同区域的通透感，调整rgba的最后一位数值，让光影更自然。

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