CSS 辐射渐变生成器 创建具有自定义形状、位置和颜色的CSS辐射渐变。
辐射渐变生成器
创建具有自定义形状、位置和颜色的CSS辐射渐变。
选择颜色
设置渐变的中心颜色和边缘颜色。
配置形状
选择圆形或椭圆形，并设置中心位置。
复制CSS代码
复制生成的CSS代码用于您的项目。
What Is 辐射渐变生成器?
径向渐变生成器创建的CSS渐变从中心点辐射出去，呈现圆形或椭圆形模式。与沿直线过渡的线性渐变不同，径向渐变可以产生聚光灯般的效果、发光球体和深度效果，这些在现代网页设计中很常见。你可以控制渐变的形状（圆形或椭圆形）、中心位置和颜色。生成器会输出兼容所有现代浏览器的CSS径向渐变代码。径向渐变特别适合用于创建视觉深度、英雄板块的聚光灯效果、装饰背景以及微妙的照明效果，使平面设计更具立体感。
Why Use 辐射渐变生成器?
-
提供圆形和椭圆形选项，实现不同效果
-
可调节中心位置，使用X/Y滑块
-
实时预览更新，当您更改设置时
-
输出干净、适合生产的CSS代码
-
免费使用，无需注册
Common Use Cases
聚光灯效果
在英雄板块或产品图片上创建吸引注意力的聚光灯效果。
发光效果
生成用于卡片、模态框或装饰元素的发光球背景。
深度和维度
使用细微的径向色过渡为平面设计添加视觉深度。
渐暗效果
在图片上创建黑边渐暗效果，呈现电影般的外观。
Technical Guide
CSS中的radial-gradient()函数从一个点开始辐射渐变。语法为：radial-gradient(形状 在 位置，颜色1，颜色2)。形状可以是"circle"（所有方向的半径均等）或"ellipse"（半径与元素宽高比匹配）。位置使用百分比值（50% 50% 表示中心）。像closest-side、farthest-corner这样的尺寸关键字控制渐变延伸的距离。颜色停止点与线性渐变一样工作。浏览器从中心向外在同心圆或椭圆中插值颜色。径向渐变是可合成的--你可以使用background-image中的逗号分隔来层叠多个径向渐变，实现复杂效果，如多光源照明。
Tips & Best Practices
-
1使用"circle"创建完美的圆形渐变，使用"ellipse"创建aspect-ratio-aware形状
-
2将中心位置设置为非对称（例如30% 30%）以实现非对称照明效果
-
3分层多个径向渐变以实现复杂的多光源效果
-
4使用透明作为边缘颜色，以实现背景上的细微淡出效果
-
5结合background-blend-mode以实现创意叠加效果
Related Tools
Frequently Asked Questions
Q 圆形和椭圆形有什么区别？
Q 我可以将中心放置在任何位置吗？
Q 径向渐变是否在所有浏览器中都受支持？
About This Tool
辐射渐变生成器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.