Browse categories

CSS 渐变生成器

完全在浏览器中创建浏览器安全的 CSS 渐变。

Live gradient preview
Customization

Color stops

Ready to use

CSS

90° linear
background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

Change a color to update the gradient.

如何使用此结果？ generator

  1. 选择线性或径向模式，应用预设或编辑每个颜色档位，然后根据需要调整位置和角度。
  2. 查看实时结果，并在需要共享时使用“复制结​​果”功能。

如何 generator works

实时预览和停止控件会生成一个标准的无前缀 CSS 背景声明，可以复制或下载。

分步指南 generation

  1. 选择线性或径向模式，应用预设或编辑每个颜色档位，然后根据需要调整位置和角度。
  2. 实时预览和停止控件会生成一个标准的无前缀 CSS 背景声明，可以复制或下载。
  3. 检查显示的结果，如有需要，请复制。

示例

135 度线性渐变可以混合多个定位的颜色点，例如蓝色为 0%，绿色为 50%，黄色为 100%。

风险提示

常见问题解答

此工具是否会将我的输入发送到其他地方？

否。交互式计算在您的浏览器中运行，本网站不会将工具输入提交到后端。

我应该如何使用结果？

检查输入的单位和值是否符合实际情况，尤其要注意日期、断点和舍入方式。

相关工具