🌈
免费 CSS 渐变生成器
创建线性、径向和锥形 CSS 渐变，带实时预览。一键复制 CSS 代码。
加载后可离线使用
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);避免差异很大的颜色之间出现灰色过渡。会附加一行普通 sRGB 代码，作为旧版浏览器的备用方案。
0%
100%
预设
常见用途
- 为hero部分创建渐变为网站hero部分和登陆页面设计全页渐变背景。
- 创建渐变按钮和CTA设计引人注目的渐变按钮背景，用于突出的行动呼吁。
- 为卡片创建渐变背景为卡片、模态框、侧边栏和UI组件背景设计渐变填充。
- 为社交媒体图形创建渐变为Instagram帖子、YouTube缩略图和Twitter卡片设计充满活力的渐变背景。
- 为图表创建颜色刻度为热力图、进度条和数据可视化生成渐变颜色刻度。
工作原理
渐变生成器直接在浏览器中构建 CSS 渐变字符串——没有库、没有服务器、不上传。一个手写函数根据你的色标和角度实时组装正确的 linear-gradient、radial-gradient 或 conic-gradient 语法，然后按你选择的输出目标格式化结果。
- 1配置色标和方向你使用浏览器原生的颜色选择器设置 2 到 6 个色标，然后用范围滑块将每个色标放在 0–100% 轴上的位置。对于线性和锥形渐变，你还需选择角度（0–360°）；对于径向渐变，你选择形状（椭圆或圆形）以及控制渐变延伸范围的尺寸关键字。
- 2buildCss 组装渐变字符串每次更改时，本地的 buildCss 函数都会将你的参数拼接为正确的 CSS 函数调用——例如 linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)。不涉及任何库；字符串用普通 JavaScript 模板逻辑构建，直接由色标数组拼接而成。
- 3通过内联样式渲染实时预览组装好的渐变字符串作为内联 background 样式直接应用到 div 元素上，由浏览器自身的 CSS 引擎渲染预览。不涉及 canvas 或图片——你看到的就是实际应用的 CSS 属性。
- 4四种格式的可复制输出格式选择器将同一渐变字符串转换为纯 CSS（background: ...）、带纯色回退的 CSS 块、Tailwind 任意值类或 SCSS 变量声明。点击“复制”会通过 navigator.clipboard.writeText 将所选输出写入剪贴板。当前渐变还会编码到网址哈希中，方便收藏或分享。