CSS 渐变生成
可视化生成 linear / radial 渐变 CSS 代码
功能介绍
添加多个颜色节点、调整角度与位置，实时预览渐变效果并生成可直接粘贴的 CSS 代码。
支持线性渐变与径向渐变两种类型。
使用说明
- 选择渐变类型（linear / radial）与角度
- 添加或删除颜色节点，拖动位置滑杆调整比例
- 预览区实时更新，代码一键复制
输入输出示例
生成结果示例
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);常见问题
支持 conic 渐变吗？
当前版本支持 linear 与 radial，conic-gradient 可手动改造生成的代码。
相关工具
- 颜色转换 - HEX / RGB / HSL 互转，含对比度与色卡预览
- Box Shadow 生成 - 可视化调节参数，生成 CSS box-shadow 代码
- Favicon 生成器 - 一张源图生成多尺寸 favicon.ico 与 PNG，本地 Canvas 处理
- Flexbox 演练场 - 可视化调节 flex 属性，实时预览布局并生成 CSS
本工具完全在浏览器本地运行，输入内容不会被上传或保存。