css径向渐变通过radial-gradient函数实现，颜色从指定中心点向外呈圆形或椭圆形过渡。它写在background或background-image属性里，浏览器自动计算填充，比用图片更轻量且易改。
一、radial-gradient基础语法
最简单写法只给一组颜色，默认从元素中心向边缘渐变：
/* 从中心白到边缘蓝的圆形渐变 */
.box {
width: 200px;
height: 200px;
background: radial-gradient(white, blue);
}
二、控制渐变形状和大小
可在颜色前加形状与尺寸参数，常见组合如下：
- circle：强制圆形
- ellipse：椭圆，默认
- closest-side：到最近边停止
- farthest-corner：到最远角停止
示例指定圆心位置和形状：
/* 圆心在左上，圆形，到最远角 */
.card {
background: radial-gradient(circle farthest-corner at 20% 30%, #ffd, #f60);
}
三、颜色断点与多色过渡
每个颜色后能写位置百分比，决定该色出现区域：
| 写法 | 含义 |
|---|---|
| red 0% | 起点纯红 |
| yellow 50% | 中间变黄 |
| black 100% | 边缘纯黑 |
/* 三色明确断点 */
.btn {
background: radial-gradient(circle, red 0%, yellow 50%, black 100%);
}
四、实际页面小例子
下面代码生成一个居中发光的圆点：
<style>
.glow {
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle, #fff 10%, #4af 60%, #026 100%);
}
</style>
<div class="glow"></div>
使用提醒
旧版浏览器需加-webkit-前缀，现在主流已支持标准写法。调试时改百分比就能看扩散范围变化，熟练后做光影背景很方便。
径向渐变本质是描绘颜色半径分布，想清楚从哪开始、到哪结束，写起来就不乱。
cssradial-gradient径向渐变修改时间：2026-07-26 11:51:09