渐变生成器

从零开始构建线性、径向和锥形 CSS 渐变，支持可拖动的多色标控制与精选预设。即时复制可粘贴的 CSS。

实时预览

预设

渐变类型

线性径向锥形

角度

颜色色标

拖动滑块可移动色标，点击渐变条可添加新色标。选中色标后可编辑其颜色。

已选色标

色标颜色

色标位置

CSS

background: —;

所有计算均实时在浏览器中完成——无需注册，完全免费。

关于渐变生成器

渐变生成器可以从零开始构建自定义 CSS 渐变。选择线性、径向或锥形类型,设定角度,并用多色标编辑器塑造渐变效果:拖动手柄移动色标,点击色条添加新色标,用取色器为任意色标重新上色——实时预览会随操作即时更新。

当你不想从空白开始时,精选预设可以提供一个不错的起点,而随机、反转、旋转 45° 等一键操作能加快探索速度。生成的 CSS 始终可见,并与预览保持同步,因此你复制到的正是你所看到的效果。

一切都在浏览器中实时计算,无需任何费用。复制完整的 CSS 规则或仅复制背景值,粘贴到样式表、按钮样式或英雄区块中——这是一个用于背景、叠加层和界面点缀的简单直接的 CSS 渐变生成器。

是的。该工具完全在客户端运行——无需注册、没有积分,你可以构建或复制任意多个渐变,没有次数限制。

线性渐变沿你选定的角度以直线方式混合颜色。径向渐变从中心点以圆形向外辐射。锥形渐变则像饼图一样围绕中心点旋转过渡颜色,非常适合制作色轮和进度环。

一个渐变至少需要两个色标,你可以持续点击色条添加更多。每个色标都有自己的颜色和可拖动的位置,因此构建复杂的多色渐变非常容易。

线性和径向渐变在所有浏览器中都受支持。锥形渐变在所有现代浏览器中都受支持,但不支持非常老旧的浏览器,如果需要兼容旧版本,请提供一个回退的 background-color。

可以——使用配套的"从图片生成渐变"工具,它会提取上传图片的主色调,并将其转换为可编辑的渐变色标。这个工具则是从零开始的对应版本。