Tool overview
什么是CSS 渐变生成器？
CSS 渐变生成器是一款帮助您设计支持 OKLCH、锥形与 Tailwind 导出的多停点 CSS 渐变的开发者工具。
为什么使用CSS 渐变生成器？
在需要设计支持 OKLCH、锥形与 Tailwind 导出的多停点 CSS 渐变时提升可读性与效率，且不会将数据上传到服务器。
核心功能
客户端隐私保护、即时结果与一键复制。设计支持 OKLCH、锥形与 Tailwind 导出的多停点 CSS 渐变
使用方法
按照以下步骤使用上方工具并获得准确结果。
- 选择线性、径向或锥形，并在实时预览上添加色标。
- 调整角度或中心位置，开启 OKLCH 获得更平滑的混合，必要时对比 sRGB。
- 复制 CSS、Tailwind 任意类或 CSS 自定义属性——或复制分享链接以便稍后恢复渐变。
- 将现有的 background: linear-gradient(...) 粘贴到“导入 CSS”以还原色标。
- 从相关工具跳转到颜色转换器或 WCAG 对比度以校验色标颜色。
CSS 渐变生成器指南：linear-gradient、OKLCH、锥形与 Tailwind
用本免费生成器构建带 CSS Color 4 OKLCH 插值、@supports 回退、Tailwind 类和可分享 URL 的多停点 linear-gradient / radial-gradient / conic-gradient CSS。
线性渐变
以角度（度）插值，支持无限色标、位置与不透明度。可选 in oklch 插值。
径向渐变
从百分比中心的圆或椭圆放射，支持多停点色带。
锥形渐变
围绕中心按 from 角度扫色，适合饼图与彩虹效果。
多停点颜色与不透明度
添加、移除、反转或随机色标；导入粘贴的 background CSS。
OKLCH 颜色插值
默认感知混合，并通过 @supports 提供 sRGB 回退以兼容旧浏览器。
CSS、Tailwind 与 CSS 变量
导出背景 CSS、Tailwind 任意类或 :root 自定义属性。
可分享 URL 与 CSS 导入
通过 ?g= / #g= 同步配置，并从粘贴的渐变 CSS 恢复。
无障碍衔接
将选中色标深链到 WCAG 对比度与颜色转换器。
CSS 渐变文字
导出渐变后用 background-clip: text 与透明文字颜色应用（Safari 需 -webkit-background-clip: text）。
CSS 渐变边框
将导出的渐变用在带内边距的外层与内部实色背景上，或对 border-image 使用同一渐变。
动画化 CSS 渐变
在此导出静态 CSS，然后在样式表中动画 background-position 或自定义属性。
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
常见问题
关于常见调试问题和数据隐私的可展开解答。
官方文档与参考
本工具的权威规范与平台文档。