CSS 渐变生成器

生成线性、径向和锥形渐变的 CSS 代码，支持自定义角度和色标。免费、隐私、100% 客户端运行。

param.gradientTypeparam.gradientAngleparam.gradientColor1param.gradientColor2param.gradientStops

输入

尝试示例:

输出

Local only

最近历史

暂无历史

使用方法

在参数中设置渐变类型、角度和两种颜色。
可选添加额外色标。
将生成的 CSS 代码复制到样式表中。

使用此工具的任务

转换 CSS to Sass/SCSS

Sass extends CSS 具有变量, nesting, mixins, 和函数. Convert plain CSS 到 SCSS 到启动 using 这些 features incrementally.

压缩 and beautify CSS

压缩 CSS for production (strip whitespace, comments, merge rules) and beautify minified CSS for debugging.

常见问题

支持哪些渐变类型？: 支持线性渐变（自定义角度）、径向渐变（圆形）和锥形渐变（自定义起始角度）。
可以添加两个以上的色标吗？: 可以。使用 stops 参数添加额外色标（如 '#ffff00 50%, #00ff00 75%'）。

相关工具

调色板生成器

从基色生成配色方案：互补色、类比色、三元色、四元色或单色方案。免费、隐私、100% 客户端运行。

颜色转换器

在 HEX、RGB、HSL、HSV 和 CMYK 颜色空间之间转换颜色，自动识别输入格式。免费、隐私、100% 客户端运行。输入 HEX、RGB 或 HSL 任一格式，即可同时获得所有五种颜色空间的值，适合前端开发、设计稿取色、印刷配色等场景。

颜色混合器

按比例混合两种颜色，支持 normal、multiply、screen、overlay、darken、lighten 混合模式。免费、隐私、100% 客户端运行。