CSS 渐变生成器
在您的浏览器中创建线性、径向和锥形 CSS 渐变。
色标
使用停止点手柄或键盘箭头编辑位置。每个停止点都包含明确的颜色、不透明度和百分比。
就绪
浏览器本地处理
您的渐变保留在此浏览器中。没有颜色或生成的 CSS 发送到 Convertr。
有界导入语法
导入接受 linear-gradient()、radial-gradient() 或 conic-gradient() 以及十六进制颜色和百分比。声明、URL、变量和未知函数会在本地被拒绝。
可用的备用方案
生成的 CSS 包含一个实色背景颜色后备，以及用于不支持渲染器和可访问控制界面的渐变。
常见问题解答
我的渐变被上传了吗？
不。渐变状态、颜色、导入的 CSS 和生成的 CSS 都保留在您的浏览器中。
支持哪些 CSS 渐变类型？
生成器创建 linear-gradient()、radial-gradient() 和 conic-gradient() 输出，包含多个十六进制颜色停止点。
我可以导入什么？
导入接受故意限制的语法，使用一个支持的渐变函数、十六进制颜色、可选百分比以及有界角度或位置值。
CSS 渐变生成器
构建线性或径向 CSS 渐变，并预览颜色停止点、角度、位置和重复。
- 输入
- 渐变类型、颜色停止点、位置、角度和重复设置.
- 输出
- 实时预览和可复制的 CSS 背景声明.
- 实际限制
- 浏览器渲染可能因引擎而异，该工具不评估对比度，也不保证在旧版浏览器中的支持。
- 隐私与数据处理
- 渐变类型、颜色停止点、位置、角度和重复设置在此浏览器选项卡中进行处理。Convertr 不会接收或存储这些信息；关闭或重新加载页面会清除工作状态，除非该工具明确提供本地下载。
如何使用此工具
- 在工具控件中提供渐变类型、颜色停止点、位置、角度和重复设置。
- 选择影响实时预览和可复制的 CSS 背景声明的设置，然后运行工具。
- 在复制或下载之前，查看实时预览和可复制的 CSS 背景声明。
常见故障模式
缺少的颜色停止点、无效的颜色或不兼容的位置会阻止生成有效的 CSS 声明。
有用的例子
创建一个从 0% 的 #111827 到 100% 的 #f59e0b 的 90 度线性渐变，并复制声明。