CSS渐变生成器 - 在线CSS渐变生成器

CSS渐变生成器常见问题

linear-gradient和radial-gradient有什么区别？

linear-gradient颜色沿直线过渡，可控制角度。radial-gradient颜色从中心向外扩散。两种类型都可设置多个色标创建丰富渐变效果。

色标(color stop)怎么用？

色标是渐变中颜色变化的位置点，如red 0%, blue 50%。多个色标可创建彩虹、条纹等效果。本工具支持添加任意数量的色标。

渐变可以用于哪些CSS属性？

gradient产生image类型值，可用于background-image、border-image等。最常用于background-image创建多彩背景。

渐变角度是怎么算的？

线性渐变的角度从正上方(0deg)开始，顺时针旋转。90deg是水平向右，180deg是向下。也可以直接用to top/right/bottom/left表示方向。

怎么做出条纹效果？

把相邻色标设成相同位置，比如background: linear-gradient(90deg, #333 0 40%, #ccc 40% 60%, #333 60% 100%); 颜色在交界处瞬间切换，就形成了条纹。

渐变和纯色背景怎么兼容？

可以在background里先写纯色兜底再写渐变，例如 background:#667eea; background:linear-gradient(...); 不支持渐变的旧浏览器会回退到纯色。

渐变颜色为什么会发灰？

这是颜色插值问题。默认在sRGB空间插值，两个高饱和颜色渐变中间会经过灰区。可用 background: linear-gradient(in hsl, red, blue) 指定interpolation-in-color-space来改善。

径向渐变能控制形状吗？

可以。radial-gradient(circle)是正圆，radial-gradient(ellipse)是椭圆，还能用at设置圆心位置，用数值控制半径。

CSS渐变生成器 - 示例演示

示例一：经典蓝紫渐变背景

输入：线性渐变，角度90deg，色标 #667eea 0% → #764ba2 100%

结果：background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

这是最经典的网页渐变配色之一，蓝紫渐变百搭且耐看，很多SaaS产品首页都在用。

示例二：三色日落渐变

输入：线性渐变，角度180deg，#ff9a9e → #fad0c4 → #fbc2eb

结果：background: linear-gradient(180deg, #ff9a9e 0%, #fad0c4 50%, #fbc2eb 100%);

三色渐变层次更丰富，暖色系渐变适合活动页、节日海报等氛围感场景。

示例三：径向渐变光晕

输入：径向渐变 circle，中心 #b3e5fc → 边缘 rgba(102,126,234,0.2)

结果：background: radial-gradient(circle, #b3e5fc 0%, rgba(102,126,234,0.2) 100%);

径向渐变适合做光晕、霓虹、发射光线等效果，也可用来做按钮/图标的柔光底。

CSS渐变生成器深度解读

线性渐变的方向与角度

线性渐变默认从顶部向底部(180deg)。可以通过角度或方向关键字控制走向，方向关键字本质也是角度：to top=0deg、to right=90deg等。

线性渐变方向速查
写法	角度	方向
to top	0deg	从下到上
to right	90deg	从左到右
to bottom	180deg	从上到下
to left	270deg	从右到左
to top right	45deg	对角
120deg	120deg	任意对角

角度写法更灵活，能表达任意方向；方向关键字更直观，适合初学者。二者可随意转换。

色标位置与颜色插值

色标位置决定颜色"切换"的时刻，0%是起点、100%是终点。
两个色标距离越近，颜色过渡越急促；距离越远，过渡越平缓。
相邻色标位置相同会形成硬边条纹。
渐变中间发灰是sRGB插值导致的，复杂场景可用color-interpolation-method或in hsl指定色彩空间。

色标位置效果
色标位置	效果
0% 100%	两端颜色，中间均匀过渡
0% 50% 100%	三个色标，多一个中间切换点
0% 0%	两端同位，形成硬边条纹
20% 80%	中间大段保持一色，只在两端过渡

理解"色标位置"是玩转渐变的核心，多放几个色标就能做出丰富的层次。

径向渐变的核心参数

radial-gradient 用 shape(形状) 和 size(大小) 以及 at(圆心) 控制。默认是椭圆、圆心在中心。

radial-gradient 常用写法
写法	含义
radial-gradient(circle, c1, c2)	正圆渐变
radial-gradient(ellipse, c1, c2)	椭圆渐变(默认)
radial-gradient(circle at top left, c1, c2)	圆心在左上角的正圆
radial-gradient(circle at 30% 70%, c1, c2)	圆心在30%横向、70%纵向
radial-gradient(circle at center, c1, c2)	圆心在中心

at参数很常用，比如灯光效果就把圆心放在光源位置，人物照片的暗角效果则把圆心放在中心、边缘压暗。

渐变的应用与兼容性

页面大背景、卡片、按钮、图标、文字(hover)都可以用渐变，瞬间提升质感。
渐变本质是image，可叠加多层：background: linear-gradient(...), url(bg.jpg); 实现渐变蒙版。
旧版前缀 -webkit-linear-gradient 已不再需要，现代浏览器全支持。
性能上渐变是GPU友好绘制，比用背景图更省流量。

渐变 vs 背景图
维度	CSS渐变	背景图
体积	几乎为零	按图片KB计算
清晰度	任意分辨率都清晰	受图片分辨率限制
加载	即时渲染	需下载后再显示
GPU	绘制友好	常规位图

渐变是"零图片"实现丰富视觉的首选方案，既省体积又清晰锐利(不依赖图片分辨率)。

CSS渐变生成器参考数据

十大经典渐变配色

名称	CSS色标
蓝紫	#667eea → #764ba2
日落	#ff9a9e → #fad0c4
海洋	#2193b0 → #6dd5ed
森林	#11998e → #38ef7d
晚霞	#ff9966 → #ff5e62
极光	#00d2ff → #3a7bd5
蜜桃	#ffecd2 → #fcb69f
石墨	#2c3e50 → #4ca1af

渐变类型与适用场景

类型	特点	适用
线性渐变	方向明确、层次清晰	页面背景、按钮、标题
径向渐变	中心向外扩散	光晕、暗角、图标、灯光
锥形渐变	围绕一点环形过渡	仪表盘、色轮、加载环

使用说明

使用方法

1. 选择渐变类型。

2. 添加色标并选择颜色和位置。

3. 线性渐变可调整角度。

4. 实时查看预览效果。

5. 复制CSS代码。