Softonic

CSS 渐变生成器

步 1 / 2
下一个

渐变可以让按钮、卡片、英雄区（hero）和徽章在无需任何图片文件的情况下显得精致。这个生成器替你写出 CSS：选择线性或径向渐变，指定两种颜色，需要时设置角度，然后把生成的 background 声明直接复制到你的样式表中。

如何创建渐变

  1. 1

    选择渐变类型

    线性用于沿角度直线过渡，径向用于从中心点向外扩散颜色。

  2. 2

    选择两种颜色

    在两个颜色输入框中输入任意十六进制颜色（例如 #2563eb 和 #16a34a）。

  3. 3

    设置角度（仅限线性）

    角度以度为单位：0deg 指向上方，90deg 指向右侧，180deg 指向下方。径向渐变会忽略角度。

  4. 4

    生成 CSS

    工具会根据你的值构建 `background:` 声明。

  5. 5

    复制代码

    复制这一行声明，粘贴到样式表中你要设置样式的元素规则里。

线性渐变

background: linear-gradient(135deg, #2563eb, #16a34a);

角度从顶部开始顺时针转动：0deg = 上，90deg = 右，180deg = 下，270deg = 左。你也可以手写命名方向：to right 等于 90deg，to bottom left 等于 135deg。

径向渐变

background: radial-gradient(circle, #2563eb, #16a34a);

颜色从元素中心向外扩散。径向渐变不使用角度；需要更多控制时，可以手写添加位置或大小关键字（at 30% 40%、ellipse）。

颜色节点

CSS 渐变可以接受两种以上的颜色，每个节点都可以有位置：

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

同一位置的两个节点会形成硬边界：颜色瞬间切换而不是混合。适合做分屏背景。

提示

  • 默认的 sRGB 插值会让红到蓝的渐变中间发灰。改用 oklch 插值可以让混合保持鲜艳：linear-gradient(in oklch, red, blue)，现代浏览器均支持。
  • transparent 并不是无色：在 sRGB 中它是 rgba(0,0,0,0)，所以淡出到透明会经过深灰色。请改用 rgba(color, 0)。
  • 现代浏览器在 GPU 上渲染渐变，任何尺寸下都几乎没有成本。渐变之间不支持动画，切换会很生硬；可以改对额外图层的透明度做动画。
  • 文字填充：把声明与 background-clip: text; color: transparent; 结合，可以用渐变填充文字。边框则可用 border-image: linear-gradient(...) 1;，现代浏览器支持。

常见问题

方向性的混合用线性，例如从上到下或从角到角流动的按钮、英雄区。从中心点向外扩散的聚光、发光效果用径向。

角度决定线性渐变的过渡方向：0deg 指向上方，90deg 指向右侧，依此顺时针转动。径向渐变会忽略角度。

默认的 sRGB 插值会平均颜色分量，产生低饱和度的中间点。改用 oklch 插值（linear-gradient(in oklch, red, blue)）可以让中间部分也保持鲜艳。

CSS 无法在两个 background-image 值之间插值，切换是生硬的。常见做法：对叠加渐变的透明度做动画，或者在一个更大的固定渐变上移动 background-position。

相关工具

ASCII 表参考

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

HTML 字符参考

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

键盘快捷键参考

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

电话号码验证器

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

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本