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()`.
常见問題
關于常见调试問題和数據私隱的可展開解答。
官方文件与参考
本工具的权威规范与平台文件。