DevTulz Online

CSS 渐变生成器

颜色节点

什么是 CSS 渐变?

CSS 渐变让您无需使用图片文件即可在两种或更多颜色之间呈现平滑过渡。共有三种类型:linear-gradient(沿直线方向)、radial-gradient(从中心点向外辐射)和 conic-gradient(围绕中心点旋转扫描)。渐变广泛用于背景、按钮、遮罩层和装饰性元素。

如何使用 CSS 渐变生成器

  1. 从色板中选择预设,或自行配置渐变。

  2. 选择渐变类型:linear、radial 或 conic。

  3. 调整角度(适用于 linear/conic)或形状(适用于 radial)。

  4. 编辑颜色节点——修改颜色和位置(0–100%)。

  5. 根据需要添加或删除颜色节点。

  6. 复制 CSS 代码并粘贴到您的样式表中。

常见问题

如何创建透明渐变? 使用 rgba() 或 hsla() 颜色值,alpha 通道设为 0 以实现完全透明。例如,rgba(0,0,0,0) 色标是完全透明的黑色,对图像的淡出覆盖很有用。

如何创建硬色标(无过渡)? 在同一位置放置两个色标——一个结束,一个在该点开始。例如,红色 50%,蓝色 50% 在中点创建从红色到蓝色的即时切换,没有渐变过渡。

哪些浏览器支持圆锥渐变? 所有现代浏览器都支持圆锥渐变(Chrome 69+、Firefox 83+、Safari 12.1+、Edge 79+)。Internet Explorer 不支持。

我可以在同一元素上使用多个渐变吗? 可以。CSS 背景接受逗号分隔的图层列表。您可以堆叠渐变,将它们与背景图像组合,并独立控制每个图层的位置和大小。

Keywords: CSS渐变生成器, 线性渐变, 径向渐变, 锥形渐变, CSS背景生成器, 渐变颜色选择器, CSS渐变工具