Developer Tools
Web Utilities
Image Tools渐变生成器
可视化创建精美的CSS渐变。生成具有多个色标的线性、径向和锥形渐变。复制即用的CSS代码。
渐变设置
预览和CSS代码
.gradient-element {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}linear-gradient(90deg, #667eea 0%, #764ba2 100%)相关工具
关于CSS渐变生成器
工作原理
- 选择线性、径向或锥形渐变类型
- 添加多个色标并精确定位
- 自定义渐变角度、形状和方向
- 实时预览渐变调整效果
- 复制项目中即用的CSS代码
- 从精美预设渐变中快速选择
常见用例
- 为网站创建令人惊叹的背景渐变
- 设计吸引眼球的按钮和卡片背景
- 构建带渐变叠加的现代UI元素
- 为英雄区域生成颜色过渡
- 为品牌设计实验颜色组合
- 学习CSS渐变语法和属性
常见问题
我可以用这个工具创建哪些类型的CSS渐变？
该工具支持所有三种CSS渐变类型：线性渐变（直线颜色过渡）、径向渐变（从中心点的圆形或椭圆形颜色过渡）和锥形渐变（围绕中心点旋转的颜色过渡）。每种类型都有可定制的方向、形状和色标设置。
如何向渐变添加多种颜色？
点击'+ 添加色标'按钮为渐变添加更多色标。每个色标可以用特定颜色（使用颜色选择器或十六进制输入）和位置（0-100%）进行自定义。
如何控制线性渐变的方向？
对于线性渐变，使用角度滑块控制0到360度的方向。0°创建从下到上的渐变，90°从左到右，180°从上到下，270°从右到左。
径向渐变的圆形和椭圆形有什么区别？
对于径向渐变，'圆形'创建完美的圆形渐变，而'椭圆'创建与元素宽高比匹配的椭圆渐变。
我可以将径向渐变定位在不同区域吗？
是的！径向渐变可以定位在中心、顶部、底部、左侧、右侧或任何角落。这控制渐变在元素内的起源位置。
如何使用预设渐变？
该工具包含20个精美预设渐变，包括日落、海洋、森林、糖果、火焰、紫色、极光等。只需点击任何预设按钮即可立即应用该渐变配置。
如何复制渐变的CSS代码？
有两个复制选项：'复制CSS'提供包含选择器的完整CSS规则，'复制值'仅提供可在任何CSS属性中使用的渐变值。
所需的最小色标数量是多少？
渐变至少需要2个色标来创建颜色过渡。该工具执行此最小值，如果只剩两个不允许删除。
这些渐变只能用于背景吗？
虽然渐变通常用于背景，但可以应用于许多CSS属性，包括background-image、border-image甚至mask-image。
锥形渐变是如何工作的？
锥形渐变在中心点周围进行圆形旋转的颜色过渡，类似色轮。角度设置控制渐变的起始位置，颜色顺时针过渡。
生成的渐变与所有浏览器兼容吗？
是的，CSS渐变在包括Chrome、Firefox、Safari、Edge和移动浏览器在内的所有现代浏览器中都有很好的支持。
添加色标后可以编辑吗？
当然可以！每个色标随时可以编辑。更改会立即在预览中反映出来。