如何用css radial-gradient创建径向渐变

radial-gradient用于创建中心向外的渐变，语法为background: radial-gradient(形状/大小/位置, 颜色停止点)；默认椭圆，可设circle、位置at top left等，支持尺寸关键词如farthest-corner和颜色节点，.box{background:radial-gradient(red,yellow,green)}从中心红到黄绿过渡，可叠加多个渐变实现光斑效果。

使用 CSS 的 radial-gradient 可以创建从一个中心点向外扩散的渐变效果。它非常适合用于背景、按钮、卡片等需要视觉层次感的设计元素。

基本语法

background: radial-gradient(形状或大小, 颜色停止点1, 颜色停止点2, ...);

最简单的形式只需要指定颜色，浏览器会自动计算中心位置和渐变类型。

<font face="Courier New">.box {
  background: radial-gradient(red, yellow, green);
}</font>

这个例子从中心开始，颜色从红色过渡到黄色再到绿色。

立即学习“前端免费学习笔记（深入）”；

设置渐变形状

默认是椭圆（ellipse），也可以设为圆形（circle）。

• radial-gradient(circle, red, blue) —— 圆形渐变
• radial-gradient(ellipse, red, blue) —— 椭圆渐变（默认）

如果容器宽高不一致，ellipse 会拉伸适应，而 circle 要求半径一致，超出部分不会显示完整圆。

控制大小和位置

可以指定渐变的起始位置和结束形状的大小。

BetterYeah AI

基于企业知识库构建、训练AI Agent的智能体应用开发平台，赋能客服、营销、销售场景 -BetterYeah

110

查看详情

• 位置：用 at center、at top left 或具体值如 at 20% 80%
• 尺寸关键词：closest-side、farthest-corner（常用）、closest-corner、farthest-side

<font face="Courier New">.box {
  background: radial-gradient(circle at top left, white, black);
}</font>

这个渐变从左上角开始，向右下方向扩展。

<font face="Courier New">.fancy-bg {
  background: radial-gradient(closest-side circle at center, #ffcc00, #ff3366);
}</font>

渐变在碰到最近的边时结束，适合做聚焦光晕效果。

添加颜色停止点

你可以精确控制每种颜色在什么位置出现。

<font face="Courier New">.stop-example {
  background: radial-gradient(red 10%, yellow 50%, green 90%);
}</font>

红色从 10% 开始，黄色在 50%，绿色到 90% 结束。中间区域平滑过渡。

还可以叠加多个径向渐变，用逗号分隔：

<font face="Courier New">.multi-gradient {
  background: 
    radial-gradient(circle at 20% 30%, rgba(255,0,0,0.5), transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(0,255,0,0.5), transparent 20%),
    blue;
}</font>

这可以创建多个光斑叠加在蓝色背景上的效果。

基本上就这些。掌握 radial-gradient 的关键是理解形状、位置、尺寸和颜色分布之间的关系。多试几种组合，就能做出丰富的视觉效果了。不复杂但容易忽略细节。

以上就是如何用css radial-gradient创建径向渐变的详细内容，更多请关注php中文网其它相关文章！