无需登录 数据私有 本地保存

径向渐变生成器 - 椭圆/圆渐变半径控制

11
0
0
0
✨ 精选预设
实时预览 ellipse farthest-corner at 50% 50%
CSS 代码
✅ 已复制到剪贴板
📘 径向渐变常见问题与知识点
什么是 CSS 径向渐变？

径向渐变（radial-gradient）是一种从中心点向外辐射的渐变效果。与线性渐变不同，它的颜色沿着半径方向扩散，可以创建圆形或椭圆形的渐变图案，非常适合模拟光源、光晕或立体球体效果。

圆形和椭圆渐变有什么区别？

圆形渐变（circle）在所有方向上以相同半径扩展，形成正圆形。椭圆渐变（ellipse）则根据容器宽高比自适应，在水平方向和垂直方向上可以有不同的扩展半径，更加灵活自然，也是默认的渐变形状。

closest-side 和 farthest-corner 是什么意思？

这些关键字定义渐变结束的位置：closest-side 渐变结束于最近的边；farthest-side 结束于最远的边；closest-corner 结束于最近的角；farthest-corner（默认）结束于最远的角，覆盖整个容器。

如何创建聚光灯效果？

使用 circle closest-side 并将中心位置偏移到非中心位置（如 40% 30%），搭配明暗对比强烈的颜色（如白色到深色），即可模拟聚光灯照射的效果。试试预设中的"聚光灯"模板。

径向渐变支持多少个颜色停止点？

CSS 径向渐变至少需要 2 个颜色停止点，但没有上限。每个停止点可以指定位置百分比（0%-100%），浏览器会自动在停止点之间进行平滑过渡。多个停止点可以创建丰富的多层次渐变效果。

径向渐变的浏览器兼容性如何？

径向渐变在现代浏览器中均有良好支持，覆盖率达 98%+。对于老旧浏览器（如 IE9-），可以使用降级方案：设置一个纯色背景作为 fallback，确保基本视觉效果不受影响。

🔧 相关工具