如何在页面中实现底部环绕式圆形彩虹效果？

核心思路 #

通过固定定位的容器配合CSS渐变，模拟出底部半圆环形的彩虹效果，核心是利用渐变色彩的分布和圆角属性构建形状。

代码实现 #

HTML结构

<div class="rainbow-circle"></div>

CSS样式（方案一：锥形渐变）

快速生成色彩过渡自然的环形彩虹：

.rainbow-circle {
  /* 固定在页面底部，全屏宽度 */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 控制彩虹高度（即半圆的半径） */
  height: 50vh;
  /* 锥形渐变：从底部中心开始，按彩虹色顺序循环 */
  background: conic-gradient(from 180deg at 50% 100%, 
    #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000);
  /* 容器顶部做圆角，形成底部半圆 */
  border-radius: 50% 50% 0 0;
  /* 放在页面内容下方，避免遮挡 */
  z-index: -1;
}

CSS样式（方案二：径向渐变）

实现边界清晰的分层环形彩虹带：

.rainbow-circle {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  /* 径向渐变：从底部中心向外，每层对应一种彩虹色 */
  background: radial-gradient(circle at 50% 100%, 
    transparent 50%, 
    #ff0000 50%, #ff0000 52%, 
    #ff7f00 52%, #ff7f00 54%, 
    #ffff00 54%, #ffff00 56%, 
    #00ff00 56%, #00ff00 58%, 
    #0000ff 58%, #0000ff 60%, 
    #4b0082 60%, #4b0082 62%, 
    #8b00ff 62%, #8b00ff 64%);
  z-index: -1;
}

自定义调整 #

• 修改height值可控制彩虹大小，数值越大弧度越平缓
• 调整渐变中的颜色百分比或角度，能改变彩虹的色彩分布和宽度
• 添加filter: blur(3px);可让彩虹边缘更柔和
• 调整z-index值可控制彩虹与页面内容的层级关系

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