请教如何实现Bootstrap官网同款背景效果？

你可以通过叠加多层径向渐变来实现四个角落颜色向中心汇聚成白色的效果，以下是完整实现代码：

HTML #

<div class="bootstrap-bg"></div>

CSS #

body {
  margin: 0;
  min-height: 100vh;
}

.bootstrap-bg {
  width: 100%;
  min-height: 100vh;
  background-image: 
    radial-gradient(circle at top right, #862e9c, transparent 50%),
    radial-gradient(circle at bottom right, #00d8ff, transparent 50%),
    radial-gradient(circle at bottom left, #ff4757, transparent 50%),
    radial-gradient(circle at top left, #ffd32a, transparent 50%);
  background-color: #fff; /* 中心基础白色 */
}

原理说明 #

• 每个radial-gradient对应一个角落的颜色，通过circle at [位置]指定渐变的起始点（比如top right就是右上角）
• 设定渐变终点为transparent，并控制渐变半径（这里用50%），让四个渐变在中心区域自然融合，最终呈现出中心白色、四角落各有专属颜色的效果
• 你可以直接替换颜色值为Bootstrap官方品牌色，或者调整transparent后面的百分比来改变渐变的覆盖范围

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