首页/开发工具/CSS 渐变代码生成

CSS 渐变代码生成

在线生成 CSS 渐变代码：支持线性、径向、锥形与重复线性渐变，可选中间色让过渡不发灰，输出标准 CSS 写法以及 Tailwind 的任意值写法。调背景、做卡片遮罩、写按钮高光都能直接拿。

本地运行 · 数据不上传开发工具免费 · 无需注册

渐变类型

角度（0–360）

起始色

结束色

中间色（可选）

启用中间色（避免过渡发灰）

CSS 渐变代码

点上方「生成」按钮开始

使用说明

选渐变类型、调角度、挑两个颜色，结果会实时生成。
默认方向 135deg 是「左上到右下」，这是最常用的方向；90deg 是从左到右。
过渡看起来发灰时勾上「启用中间色」，加一个同色系的中间色过渡会干净很多。
结果里同时给了标准 CSS 和 Tailwind 任意值写法，按你项目用什么框架挑一条。

常见问题

角度是怎么算的？

0deg 是从下往上，顺时针递增：90deg 从左到右，180deg 从上到下，270deg 从右到左。这个约定和 CSS 规范一致——和很多人直觉相反，所以调试时容易搞错方向。

渐变为什么有时候发灰？

因为浏览器在 sRGB 空间里做线性插值，两个对比强的颜色中间会经过灰色区（最典型的是红到绿，中间变暗黄）。解决办法是加一个中间色停靠点把插值路径拉回来，或者用 oklab 色彩空间的渐变（支持度还在铺开）。

渐变能用在文字上吗？

可以，需要配合 background-clip: text 和 color: transparent，还要加 -webkit- 前缀兼容。注意这种方式在部分浏览器里的可访问性（屏幕阅读器）表现一般，正文文字慎用。

相关工具

颜色格式转换输入任意格式的颜色值，一次得到 HEX、RGB、RGBA、HSL、HSV、CMYK、CSS 颜色对比度检测输入文字色和背景色，算出 WCAG 对比度比值并逐条判断是否达到 AA / AAA 标准（正调色板生成输入基准色，按色轮关系生成完整配色方案：单色阶、互补色、类似色、三角色、分裂互补、四角方阵、在线 JSON 格式化在线 JSON 格式化与校验工具，支持美化排版、压缩、转义、去转义、转 GET 参数，自动定 HTTP 状态码对照表完整的 HTTP 状态码对照表，收录 1xx 到 5xx 全部常见状态码，含中文含义、常见成 JSON 转 YAML 把 JSON 转成 YAML，键值自动缩进、字符串按需加引号，可直接粘进 Kubernete

开发工具 · 该分类共 125 个工具，展开查看全部

在线 JSON 格式化 HTTP 状态码对照表 JSON 转 YAML JSON 转 XML JSON 转 CSV JSON 转 TypeScript 类型 JSON 转 Java 实体类 JSON 转 Go 结构体 JSON 转 Python 字典 JSON 转 SQL 建表语句 JSON 转 Markdown 表格 JSON 键排序清除 JSON 空值 JSON 扁平化 JSON 结构分析 JSON 字段清单 JavaScript 代码美化 JSON 压缩 JSON 转 Excel JSON 树形查看 JSON Schema 生成 YAML 转 JSON YAML 格式化 XML 转 JSON JSON 转 C# 实体类 JSON 转 PHP 数组 JSON 转 Rust 结构体 JSON 转 Kotlin 数据类 JSON 转 Swift 模型 JSON 转 Dart 模型 CSV 转 JSON JSON 转 JSONL JSONL 转 JSON XML 格式化 SQL 格式化 HTML 格式化 CSS 格式化 PHP 代码格式化 Java 代码格式化 C# 代码格式化 Python 代码格式化 Ruby 代码格式化 C 代码格式化 C++ 代码格式化 Perl 代码格式化 VBScript 格式化 Go 代码格式化 Rust 代码格式化 Kotlin 代码格式化 Swift 代码格式化 Scala 代码格式化 Lua 代码格式化 R 代码格式化 XML 压缩 SQL 压缩 HTML 压缩 CSS 压缩 JavaScript 压缩 SVG 代码压缩 PHP 代码压缩 Java 代码压缩 C# 代码压缩 Python 代码压缩 Go 代码压缩 Rust 代码压缩 Kotlin 代码压缩 Lua 代码压缩代码去注释 MD5 加密 SHA1 加密 SHA256 加密 SHA512 加密国密 SM3 计算 HMAC 计算 AES 加密解密 DES 加密解密 RSA 密钥对生成 JWT 生成 Query String 构建 Cookie 解析 URL 完整解析文本 Diff 对比代码 Diff 对比三向文本对比 HTTP 报文解析版本号比较代码行数统计 HTML 与 UBB 互转 htaccess 转 Nginx XPath 测试工具手机号格式校验邮箱格式校验身份证号码校验银行卡号校验信用卡号校验 UUID 批量校验编码批量识别文本编码检测 User-Agent 解析浏览器信息检测颜色格式转换颜色对比度检测调色板生成 CSS 渐变代码生成 Cron 表达式解析 Cron 表达式生成正则表达式测试 KeyCode 按键码查询 Android 按键码查询 HTML 转 Markdown 文件哈希校验 SQL 转 Java 实体类 SQL 转 C# 实体类 SQL 转 Go 结构体 SQL 转 Python 类 Markdown 转 HTML 随机字符串生成 NanoID 生成器 UUID 批量生成键盘按键测试 WebSocket 在线测试条形码生成 Markdown 编辑器 Base64 转图片二维码批量生成