前端Wiki/工具/CSS 渐变生成器

CSS 渐变生成器

工具说明可视化调试 linear-gradient / radial-gradient / conic-gradient 三种 CSS 渐变：自由增删颜色停止点、调整角度与径向形状，预览实时渲染，CSS 代码一键复制。所有计算在浏览器本地完成，不产生任何网络请求。

渐变参数

渐变角度 45deg

径向形状圆心固定在元素中心 50% 50%

类型	语法	说明
线性渐变	`linear-gradient(<angle>, c1 p1, c2 p2, ...)`	沿一条直线过渡。角度 0deg 自下而上、90deg 自左向右；也可用 `to right` 等关键词。色标位置可省略，默认均匀分布。详见线性渐变教程。
径向渐变	`radial-gradient(circle at 50% 50%, c1, c2)`	从圆心向外辐射。`circle` 为正圆、`ellipse` 为椭圆（默认）；`at` 指定圆心位置，可用 `farthest-corner` 等关键字控制尺寸。详见径向渐变教程。
锥形渐变	`conic-gradient(from 45deg at 50% 50%, c1, c2)`	围绕中心点旋转扫射，适合做饼图、色环、加载圆环。`from` 指定起始角度，色标按顺时针排列。详见 conic-gradient 词条。