如何用CSS radial-gradient创建背景渐变圆点

CSS的radial-gradient径向渐变函数可以生成从中心点向外扩散的渐变效果，通过合理设置渐变的形状、尺寸和颜色断点，就能快速创建出各种样式的圆点背景，相比使用图片背景更灵活且加载速度更快。

radial-gradient基础语法

radial-gradient的基本语法结构如下，其中shape表示渐变形状，size表示渐变尺寸，position表示渐变中心位置，color-stop是颜色断点：

/* 基础语法 */
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

常用的shape取值为circle（圆形）和ellipse（椭圆形），如果不指定shape，默认会根据size的取值自动判断。position默认是center，也就是元素中心位置。

创建基础单色圆点背景

要创建均匀分布的单色圆点背景，需要设置渐变形状为圆形，然后控制颜色断点的范围，让圆点之外的区域为透明，再配合background-size调整单个渐变单元的尺寸，就能实现重复的圆点效果。

/* 基础单色圆点背景 */
.dot-bg {
  width: 100%;
  height: 300px;
  /* 创建圆形渐变，中心为蓝色，半径10px内为蓝色，10px外为透明 */
  background-image: radial-gradient(circle 10px at center, #4a90e2 0%, #4a90e2 100%, transparent 100%);
  /* 设置单个渐变单元的尺寸，控制圆点间距 */
  background-size: 30px 30px;
  background-color: #f5f5f5;
}

上面的代码中，circle 10px表示圆形的半径是10px，at center指定渐变中心在单元中心，颜色断点设置让10px范围内都是蓝色，超出范围就是透明，这样每个30px*30px的单元里就有一个10px半径的蓝色圆点，重复平铺后就形成了均匀的圆点背景。

创建渐变效果的圆点背景

如果希望圆点本身带有渐变效果，只需要调整颜色断点的设置，让圆点从中心到边缘呈现颜色过渡即可。

/* 带渐变效果的圆点背景 */
.gradient-dot-bg {
  width: 100%;
  height: 300px;
  /* 圆点从中心浅蓝过渡到边缘深蓝，再过渡到透明 */
  background-image: radial-gradient(circle 12px at center, #87ceeb 0%, #4a90e2 70%, transparent 100%);
  background-size: 35px 35px;
  background-color: #f0f8ff;
}

这里颜色断点设置了三个值，0%位置是浅蓝色，70%位置是深蓝色，100%位置是透明，这样每个圆点就会有从内到外的渐变效果，视觉上更有层次感。

创建多色不规则圆点背景

如果需要不同颜色、不同尺寸的圆点混合分布，可以定义多个径向渐变背景，用逗号分隔叠加在一起，每个渐变设置不同的参数即可。

/* 多色不规则圆点背景 */
.multi-dot-bg {
  width: 100%;
  height: 300px;
  background-image: 
    radial-gradient(circle 8px at 20% 30%, #ff6b6b 0%, #ff6b6b 100%, transparent 100%),
    radial-gradient(circle 12px at 70% 60%, #51cf66 0%, #51cf66 100%, transparent 100%),
    radial-gradient(circle 10px at 40% 80%, #ffd43b 0%, #ffd43b 100%, transparent 100%);
  background-size: 50px 50px, 60px 60px, 45px 45px;
  background-color: #f8f9fa;
}

这里叠加了三个不同的径向渐变，每个渐变的圆点位置、大小、颜色都不一样，背景尺寸也分别设置，最终会形成颜色、大小、分布都不规则的圆点背景效果。

常见问题说明

• 圆点边缘模糊：如果颜色断点的过渡范围设置过大，圆点边缘会出现模糊，需要缩小颜色过渡的区间，比如让颜色在99%到100%之间快速过渡到透明。
• 圆点间距不均匀：调整background-size的取值，同时配合渐变中心的位置参数，就能控制圆点的分布密度和间距。
• 兼容性：radial-gradient在主流现代浏览器中都支持，如果需要兼容旧版本浏览器，可以添加前缀-webkit-radial-gradient等。

使用radial-gradient创建圆点背景的核心是通过颜色断点控制圆点的显示范围，再通过background-size控制重复平铺的单元尺寸，灵活调整这两个参数就能实现各种想要的效果。

CSSradial-gradient背景渐变圆点背景修改时间：2026-07-15 19:42:55