首页 › 前端工具 › CSS渐变
CG

CSS渐变

在线CSS渐变生成器,支持线性/径向渐变,动态色标管理

功能CSS 渐变生成器
渐变类型线性 / 径向渐变
色标管理动态增删 / 角度控制
输出实时预览 + CSS 代码
渐变预览2 个色标
生成的 CSS 代码0 字符
渐变类型linear
色标数量2 个
角度90deg

CSS 渐变生成器说明

CSS 渐变(Gradient)是一种在两个或多个指定颜色之间显示平滑过渡的效果,无需使用图片即可实现丰富的视觉效果。CSS 支持线性渐变和径向渐变两种主要类型。

线性渐变(linear-gradient):颜色沿一条直线方向过渡。通过角度(0deg-360deg)控制方向,0deg 表示从下到上,90deg 表示从左到右,180deg 表示从上到下。

径向渐变(radial-gradient):颜色从中心点向外辐射过渡。可选择圆形(circle)或椭圆(ellipse),并设置中心位置(如 center、top left 等)。

色标管理:每个色标由颜色和位置百分比组成,表示该颜色在渐变中出现的位置。至少需要两个色标,最多支持十个。点击"添加色标"可增加新的颜色控制点。

预设方案:提供日落、海洋、森林、金色四种预设渐变,点击即可快速应用。也可自由调整色标颜色和位置创建自定义渐变。

使用场景:网页背景、按钮样式、卡片装饰、横幅设计等。生成的 CSS 代码可直接复制到样式表中使用。

前端工具