CSS 渐变生成器能做什么？
CSS 渐变生成器可视化编辑 linear-gradient（线性渐变）、radial-gradient（径向渐变）、conic-gradient（锥形渐变），拖动色标调颜色和位置，实时预览后一键复制 CSS 代码。渐变是现代 UI 的灵魂：按钮、背景、遮罩、文字效果都离不开它——但手写渐变语法容易出错，本工具让你「看着调」而不是「对着代码猜」。
使用步骤
- 打开 CSS 渐变生成器
- 选择渐变类型：线性 / 径向 / 锥形
- 拖动角度盘设置渐变方向（线性渐变）
- 点击色标添加颜色点，拖动调整位置
- 点击色块修改颜色（支持 HEX、RGB、HSL、透明度）
- 实时预览效果，可切换预览到按钮、卡片、文字等实际场景
- 复制 CSS 代码使用
语法详解
- linear-gradient(90deg, #667eea, #764ba2)：90 度从左到右双色渐变
- 多色标：linear-gradient(to right, #f00 0%, #0f0 50%, #00f 100%)
- 色标位置：百分比控制颜色过渡的落点
- radial-gradient(circle, #fff, #000)：从中心向外的圆形渐变
- conic-gradient(#fff, #000)：绕中心旋转的锥形渐变，做色轮、饼图
- transparent 关键字：渐变到透明，做遮罩效果
流行渐变方案
- 科技蓝紫：#667eea → #764ba2，SaaS 产品常用
- 日落橙粉：#ff9966 → #ff5e62，活力消费品牌
- 极光绿蓝：#43e97b → #38f9d7，环保清新调
- 高级灰金：#2c3e50 → #fd746c，深色背景点缀
- 蜜桃奶油：#ffecd2 → #fcb69f，柔和女性化场景
注意事项与边界情况
- 文字上的渐变需配合 background-clip: text 和 -webkit-text-fill-color: transparent
- 渐变对比度过低会影响可读性，正文区域慎用彩色渐变
- 透明度渐变在深色背景上效果差异大，务必在目标背景上预览
- 旧浏览器（IE）不支持渐变，企业内网项目需评估兼容性
- 性能：渐变是渲染属性，动画渐变建议用 transform/opacity 优化
常见问题
- 渐变方向怎么控制？
- 线性渐变用角度（0deg 向上、90deg 向右）或 to right 等关键字。
- 怎么做透明遮罩？
- linear-gradient(rgba(0,0,0,0.6), transparent)，图片上盖一层渐变。
- 色标是什么？
- 渐变中每个颜色的位置点，位置用百分比控制过渡节奏。
- 能保存我的渐变吗？
- 复制 CSS 代码保存即可；也可截图收藏到灵感库。
- 为什么代码粘贴后不生效？
- 检查属性名拼写、是否缺少分号、浏览器是否支持（radial/conic 需较新浏览器）。
实战案例：做一个科技感登录卡片
需求：SaaS 风格的登录卡片背景。做法：线性渐变 90 度，三个色标——#667eea 放 0%、#ffffff 放 50%、#764ba2 放 100%，生成的 CSS 里应该恰好出现 3 个色值、3 个位置百分比（色标数=颜色数，这是自检恒等式，多了少了都是参数写错）。铺在卡片上后前景文字用深灰 #2c3e50，对比度 4.8:1 达标。整体效果：蓝紫到紫的柔和过渡，中间一道亮光带，科技感立现。
常见错误
- 角度记反：90deg 是从左到右不是从上到下，做出来的渐变横竖颠倒
- 色标位置全部挤在中间：过渡区间太窄，看起来像色块拼接不是渐变
- 渐变上放低对比文字：浅色渐变配白字直接不可读，正文区域先查对比度
- 复制代码漏了浏览器前缀或分号：整个 background 声明失效回退纯色
- 在深色模式下没复查：浅色渐变配深色文字的组合到深色主题里全乱
进阶方向
- 径向渐变（radial-gradient）做聚光灯效果，锥形渐变（conic-gradient）做色轮和饼图
- 文字渐变玩法：background-clip: text 让标题呈现渐变色
- 渐变动画用 CSS 变量过渡背景色标位置，做流光效果
- 配色拿不准时先用颜色搭配生成器出方案，再回生成器调渐变
总结
CSS 渐变生成器把「调渐变」变成「拖滑块」：选类型、调色标、定方向、复制代码。收藏几个流行配色方案，设计效率和颜值双提升。