开发者免费本地运行
CSS 渐变生成器
构建线性、径向和锥形 CSS 渐变——拖动色标、选择颜色、复制 CSS。
预览
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);类型
预设
添加最多 6 个颜色停止点，拖动位置滑块，复制 CSS。
关于CSS 渐变生成器
Handytool 的 CSS 渐变生成器用最多六个色标构建线性、径向和锥形渐变。拖动色标的位置，更改其颜色，切换渐变类型，实时预览和 CSS 声明会立即更新。从内置预设之一开始——Lime Swiss、Sunset、Sky、Aurora——或从头开始设计。
CSS 渐变生成器功能
- 01
线性、径向和锥形
线性是日常背景渐变；径向适合高光和渐晕；锥形完美适合饼图、色轮和旋转背景。
- 02
最多六个色标
添加和删除色标，用滑块设置每个位置，通过系统拾色器或十六进制值选择其颜色。色标按位置自动重新排序。
- 03
可复制的 CSS 声明
输出是完整的 background: ... 声明，可直接粘贴到样式表、样式组件或 Tailwind 任意值类中。
CSS 渐变生成器常见问题
- 线性、径向和锥形有什么区别？
- 线性渐变沿给定角度的直线运行；径向渐变从中心向外传播；锥形渐变像时针一样围绕一个点旋转。每一个都适合不同的视觉效果。
- 我应该使用多少个色标？
- 两个色标是经典的双色渐变。三个或四个让您创建逼真的过渡（日落、极光）。超过六个往往看起来很嘈杂——这就是为什么此生成器限制为六个。
- 我可以为电子邮件模板中的背景使用此吗？
- 大多数电子邮件客户端仍然不可靠地支持现代 CSS 渐变——如果将此复制到电子邮件模板中，请提供纯色回退以及背景渐变。
- 输出像素精确吗？
- 是的——预览由浏览器的本地渐变引擎呈现，所以您看到的正是您的 CSS 将产生的。