CSS 渐变生成器
可视化创建线性、径向和锥形渐变。添加色标，从预设中选择，导出为CSS、Tailwind配置或SVG。下载为1920×1080 PNG。
预设
CSS渐变生成器 — 可视化创建精美渐变
CSS渐变已取代图片用于大多数背景设计任务——它们与分辨率无关、即时加载且可以动画化。此生成器为所有三种CSS渐变类型提供可视化编辑器，具有实时预览和可直接复制的CSS、Tailwind CSS和SVG输出。
三种渐变类型
- 线性渐变 — 沿直线过渡颜色。控制角度（0°–360°）。最常用于英雄背景、卡片和按钮。
- 径向渐变 — 从中心点向外过渡颜色。创建聚光灯或圆形光晕效果。
- 锥形渐变 — 像色轮一样围绕中心点过渡颜色。适用于饼图和进度指示器。
导出格式
- CSS — 标准的
background属性，可直接粘贴到任何样式表中。 - Tailwind CSS — 使用任意值语法：
bg-[linear-gradient(...)]。 - SVG — 包含linearGradient定义的独立SVG。
- PNG下载 — 将渐变渲染到1920×1080画布并下载为PNG。适用于社交媒体背景和Figma导入。
常见使用场景
- 为着陆页创建醒目的英雄区背景。
- 生成按钮悬停效果和卡片背景。
- 为演示文稿和社交媒体构建品牌色彩渐变。
- 导出桌面或移动端的渐变壁纸。
常见问题
- 渐变生成器可以创建哪些类型的渐变？
- 支持线性渐变（linear-gradient）和径向渐变（radial-gradient），可设置多个色标、角度和位置。支持 2-5 个颜色的多色渐变。
- 如何使用生成的渐变？
- 工具会自动生成可复制的 CSS 代码。只需复制代码并粘贴到您的样式表中即可。支持所有现代浏览器,无需添加供应商前缀。
- 包含预设渐变吗？
- 是的,提供数十种精选渐变预设,涵盖流行的配色方案。您可以直接使用预设,也可以在此基础上自定义修改颜色和方向。
- 可以导出渐变为图片吗？
- 可以。除了 CSS 代码,您还可以将渐变导出为 PNG 图片文件,用于设计稿、社交媒体背景或其他非 CSS 用途。
- 渐变生成器免费吗？有使用限制吗？
- 完全免费,没有使用限制。所有渐变都在浏览器中实时生成和预览,无需注册或安装任何软件。