首页 › 前端工具 › CSS 渐变生成器
GG

CSS 渐变生成器

支持线性渐变和径向渐变,调整颜色和角度,实时预览并生成 CSS 代码

功能CSS 渐变生成器
可调属性类型 / 颜色 / 角度
输出实时预览 + CSS 代码
#73b9ff
#1a1a2e
渐变预览linear
生成的 CSS 代码0 字符
类型linear
颜色#73b9ff -> #1a1a2e
角度90deg

CSS 渐变生成器说明

CSS 渐变(Gradient)在两个或多个颜色间显示平滑过渡,无需图片即可实现丰富视觉效果,分为线性渐变和径向渐变。

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

径向渐变(radial-gradient):颜色从中心点向外辐射。可设置中心位置如 center、top left 等。

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

前端工具