Softonic

CSS渐变生成器

步 1 / 3
类型
下一个

现代UI背景很少使用纯色，主角区域、按钮和卡片几乎均采用CSS渐变色。该生成器可让您选择线性或径向渐变方式，设置任意数量的色彩级数，设定角度（适用于线性渐变）或形状（适用于径向渐变），并复制标准background: linear-gradient(…)值直接粘贴至样式表中。

如何创建CSS渐变

  1. 1

    选择渐变类型

    线性（按角度方向）或径向（圆形/椭圆形）。

  2. 2

    设置角度或形状

    线性：0–360°。径向：圆形或椭圆。

  3. 3

    添加色阶

    每个色阶均为一种颜色及其对应位置（0–100%）。两级渐变作为基准；三级及以上渐变可实现更平滑的过渡效果。

  4. 4

    复制 CSS

    输出结果为单一的`background`属性值，可直接粘贴到任意CSS文件中。

语法速查表

/* 线性 */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* 径向（圆形） */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* 多级 */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

实际上符合直觉的角度

CSS坐标系中的角度与三角学角度不同：0deg指向上方（北），90deg指向右侧（东），180deg向下，270deg向左。

方向 角度
自上而下 180度
从下到上 0度
从左到右 90度
从左上角到右下角 135度

避免使用浑浊的中间色调

互补色之间的线性渐变（例如蓝色→橙色）会在约50%处穿过一条灰色区域，此时混合效果显得“死板”。可通过以下方式修正：

  • 在相关色系中添加中间停靠点（蓝色 → 紫色 → 橙色）。
  • 使用 OKLCH 插值法（linear-gradient(in oklch, ...)）实现视觉上更平滑的渐变效果，该功能自2024年起已全面支持于所有现代浏览器。
  • 轻微调整其中一个端点的色调，使中间调处于更暖的色系中。

性能提示

渐变由GPU绘制，通常成本较低。即使对某个渐变进行动画处理（如background-position特效技巧、SVG模糊效果），仍可能产生较高的渲染成本，建议在发布前于中端手机上进行测试。

常见问题

CSS中的渐变从顶部按顺时针方向测量角度，而标准数学则从右侧按逆时针方向测量。在CSS中，90deg指向右侧；而在三角学中，该值应为0°。

规格允许使用任意数量的色阶。实际上，超过4至5个色阶往往会产生类似彩虹般的效果；而经过精心选择的2或3个色阶则几乎总能呈现更纯净的视觉效果。

是的，将其作为任意值粘贴：class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]"。对于可重复使用的渐变色，请在您的Tailwind配置中定义自定义工具。

标准编辑器会将渐变设置发送到服务器以渲染预览。在引导流程中，类型、角度、形状和颜色节点也会显示在页面 URL 中。请勿输入敏感信息；该工具不会保存可重复使用的渐变项目。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

BBCode 转 HTML 转换器

将 BBCode（论坛标记）转换为干净的 HTML。支持格式标签、列表、引用、代码、图片和链接。

随机颜色生成器

生成 1 到 50 个随机 HEX 颜色，查看色块，复制代码，并用于 CSS、测试或配色探索。