🎨

CSS渐变生成器

🎨 CSS渐变生成器
{{ color.stop || 0 }}%
📋 渐变预览与代码
👁️ 实时预览
📝 CSS代码
{{ n }}

💡 功能说明

在线CSS渐变生成器:可视化创建线性渐变、径向渐变和锥形渐变,一键复制代码,帮助您快速设计精美的渐变效果。

  • 三种渐变类型 — 支持线性渐变、径向渐变、锥形渐变
  • 多色支持 — 支持添加多个颜色节点,自由调整位置
  • 角度调整 — 支持方向选择和角度滑块精确调整
  • 预设模板 — 内置多种精美预设渐变,一键应用
  • 实时预览 — 所有调整实时反映到预览区域
  • 一键复制 — 生成的CSS代码可直接复制使用

⚠️ 注意事项

  • 支持RGB、HEX、HSL等颜色格式
  • 颜色节点拖动滑块可调整位置百分比
  • 生成的代码兼容主流浏览器(Chrome、Firefox、Safari)
  • 所有操作在浏览器本地完成,数据不会上传到服务器
  • 锥形渐变需要较新浏览器支持