颜色与设计
CSS 渐变生成
CSS 渐变生成器只需在可视化界面中调整颜色、方向和色标，即可自动生成 CSS 渐变代码，是一款免费的在线工具。支持线性（linear）、径向（radial）、圆锥（conic）三种渐变，可一边查看实时预览，一边快速制作可用于网页背景、按钮、标题等场景的渐变。
色标（颜色变化的起点）
渐变类型
预览
CSS 代码
.gradient {
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
}
渐变的生成全程在您的浏览器中完成，输入的内容不会被发送到外部服务器。
相关工具
取色器
从图片中提取颜色并获取颜色代码的免费取色器，可用放大镜按像素精确拾取，支持 HEX / RGB / HSL 切换与调色板导出。免费、无需注册。
颜色代码转换
在 HEX、RGB、HSL、HSV、OKLCH 颜色代码之间相互转换的免费工具，支持透明度（RGBA、8 位 HEX）与 CMYK 参考值，一键复制任意格式，全程在浏览器中完成。
对比度检查器
实时计算前景色与背景色对比度的免费颜色对比度检查器，判定 WCAG 2.1/2.2 AA、AAA 是否达标，并支持达标色建议、色盲（色觉）模拟与 APCA，全程在浏览器中完成。
配色生成器
只需选择一种基础色，即可基于配色理论自动生成互补色、类似色、三角配色等配色方案的免费在线配色工具。可导出为 CSS 变量、Tailwind、SCSS、JSON 格式，并能查看对比度参考，全程在浏览器中完成。
CSS 渐变生成是什么?
CSS 渐变生成器只需在可视化界面中调整颜色、方向和色标，即可自动生成 CSS 渐变代码，是一款免费的在线工具。支持线性（linear）、径向（radial）、圆锥（conic）三种渐变，可一边查看实时预览，一边快速制作可用于网页背景、按钮、标题等场景的渐变。
选定类型后，线性和圆锥渐变可用滑块调整角度，径向渐变可指定形状（圆形・椭圆）和中心位置。颜色以色标的形式自由添加、删除，可拖动色条上的手柄改变位置，也可通过取色器或 HEX 输入选取颜色。每个色标还能设置不透明度（Alpha），从而制作使用 rgba() 的透明渐变。点击「随机生成」按钮，还能快速尝试各种配色灵感。
制作好的渐变可一键复制为 CSS（background-image）、CSS 变量（:root { --gradient }）、Tailwind 的 backgroundImage、SCSS 变量等格式，直接粘贴到代码中即可。此外，点击「复制 URL」可获得能够还原当前渐变的分享 URL，便于团队共享或收藏。
渐变的生成全程在您的浏览器中完成，输入的内容不会被发送到外部服务器。无需注册账号、无需点击广告，即可立即使用。
使用方法
- 点击色标色条添加颜色，拖动手柄改变位置。颜色可通过取色器或 HEX 选取，不透明度（Alpha）用滑块调整。点击「随机生成」即可快速尝试各种配色灵感。
- 选择渐变类型（线性・径向・圆锥）。线性和圆锥渐变用滑块调整角度，径向渐变调整形状（圆形・椭圆）和中心位置。
- 在预览中实时确认渐变效果。点击「复制 URL」即可获得能够还原当前设置的分享 URL。
- 在「CSS 代码」中切换 CSS、CSS 变量、Tailwind、SCSS 标签页，用「复制 CSS 代码」获取代码并粘贴到项目中。
使用场景
- 想为网页或按钮背景使用渐变的设计师、前端开发者，快速复制 CSS 直接使用。
- 想一边尝试线性、径向、圆锥等多种渐变，一边确定设计方向的前端工程师。
- 想把渐变直接落地为 CSS 变量或 Tailwind 配置的开发者。
- 想用带不透明度的渐变制作覆盖在图片上的蒙层或玻璃质感效果的用户。
- 想把确定好的渐变通过分享 URL 发给团队，或日后还原同一设置的用户。
注意事项
- 渐变的生成全程在浏览器中完成，输入的内容不会被发送到外部。
- 圆锥渐变（`conic-gradient`）在部分较旧的浏览器中可能无法显示，请确认所用环境的支持情况。
- 色标最多可添加 8 个。不透明度为 100% 时输出 `#RRGGBB`，不足 100% 时输出 `rgba()`。
- 分享 URL 中包含类型、角度、形状、中心位置以及各个色标（颜色・不透明度・位置）。打开该 URL 会以相同设置还原渐变。