开发者 / CSS
CSS渐变生成器
使用实时预览、任意数量的色标和预设设计线性、径向或圆锥渐变，然后复制CSS。
CSS渐变生成器: 此生成器会编写浏览器绘制所需的background声明，用于呈现你看到的渐变：带角度的linear-gradient、从中心向外以圆形或椭圆形扩散的radial-gradient，或从起始角度环绕展开的conic-gradient；每种渐变都会按顺序包含其色标。第一行会先写入纯色，作为无法绘制渐变的过旧浏览器的备用方案。添加新颜色时，颜色会出现在间距最大的空隙中，并根据相邻颜色混合生成，因此渐变不会突然跳变。 完全在浏览器中本地运行，文件不会上传到服务器。
- 类别
- 开发者工具
- 使用次数
- 在浏览器中
- 费用
- 免费·无需注册
- 可用性
- 可直接使用
完全在浏览器中运行
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
第一行是供非常旧的浏览器使用的纯色；所有当前浏览器都会使用第二行的渐变。
预设
让渐变看起来平滑
两种差异很大的色相之间进行混合时，例如从蓝色渐变到黄色，中间会经过暗淡的灰色。在中间加入一个更明亮的颜色停靠点，可以让渐变保持活力。相邻色相之间的渐变，例如从橙色到粉色，通常不需要额外处理。
渐变上的文本
请检查文本在渐变两端都保持可读，不要只看中间部分。深色渐变配白色文本，或在深色文本后使用柔和的渐变，都比明亮的彩虹渐变更稳妥。
使用方法
- 选择预设，或选择线性、径向或圆锥渐变。
- 设置角度，调整颜色及其位置；添加颜色以增加色标。
- 将CSS复制到样式表中。
隐私与限制
所有操作都在浏览器中运行；你上次使用的渐变只会保存在此浏览器中。
相关工具
常见问题
线性渐变中的角度是什么意思？
0deg表示从下到上，90deg表示从左到右，180deg表示从上到下，270deg表示从右到左。渐变会沿该方向绘制，因此135deg表示从左上角到右下角。
什么是色标？
色标是一个颜色，以及它在渐变中从0%到100%的位置；渐变到达该位置时会准确显示这个颜色。两个色标之间的颜色会混合；将两个色标放在同一位置会形成硬边而不是混合，这就是制作条纹的方法。
圆锥渐变与径向渐变有什么不同？
径向渐变会从中心向外以环状改变颜色。圆锥渐变则会围绕中心改变颜色，类似时钟指针的转动，适合制作色轮和饼图。
现在还需要使用-webkit-前缀吗？
不需要。所有当前浏览器都支持不带前缀的linear-gradient和radial-gradient，conic-gradient也已从2021年起在所有这些浏览器中正常运行。第一行的备用颜色只针对更早期的浏览器。
免费工具·使用在浏览器中次·无需账户