CSS 渐变生成器

功能简介

CSS 渐变生成器让你直观地调出渐变，再复制最终的 CSS。选择线性、径向或锥形渐变，添加任意多个色标，拖动它们的位置，设置角度或中心点，预览会立即更新。也可以粘贴已有的 linear-gradient(…)、radial-gradient(…) 或 conic-gradient(…) 代码，用可视化方式继续编辑。所有操作都在浏览器里完成。

使用方法

1. 从某个预设开始，或者沿用示例渐变。
2. 选择「类型」。线性和锥形渐变有角度；径向和锥形渐变有中心点，可以用「中心 X」「中心 Y」移动。
3. 编辑「色标」：用取色器或直接输入任意 CSS 颜色来修改颜色，拖动「位置」移动色标，「添加色标」会在间隔最大的地方插入一个，「反转」可以倒转顺序。
4. 打开「重复」可以让渐变平铺，做出条纹和圆环。
5. 从「CSS」卡片复制代码，需要时勾选纯色兜底以兼容非常老的浏览器。

底部的「渐变 CSS」框显示渐变值并且可以编辑：把样式表或设计工具里的渐变粘贴进去，上方的控件会自动读取。

示例

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

做好渐变的小技巧

• 克制一些。 相邻色相（蓝到紫、橙到粉）比互补色过渡更顺滑，互补色在中间容易变成发灰的浑色。
• 加一个中间色标 来控制过渡。比两侧稍亮的第三个色标能做出柔和的高光。
• 硬边做形状。 位置相同的色标会形成锐利边缘，条纹、旗帜、进度条和饼图都用这个技巧。
• 方向。 to right 等于 90deg，to bottom（默认）等于 180deg。角度从正上方开始顺时针计算。
• 渐变上的文字 要在整个渐变范围内都清晰可读。用对比度检查工具分别检查最亮和最暗的色标与文字颜色的对比度。