What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors, defined using CSS's background or background-image property without any image file.

What is the difference between linear and radial?

A linear gradient transitions in a straight line at a given angle. A radial gradient radiates outward from a center point in circular or elliptical shapes.

Can I use more than two colors?

Yes, CSS supports multiple color stops. This generator uses two colors; for more complex gradients, add additional color stops manually in the CSS code.

CSS Gradient Generator — create beautiful CSS gradients

Pick two colors, choose the gradient type and angle, and copy the CSS code for your project.

不用任何设计软件,做出惊艳的CSS渐变

渐变是给网站增添视觉层次和现代感最有效的手段之一。CSS渐变不需要任何图片文件,由浏览器直接生成,所以加载速度极快。这个生成器让你通过挑选颜色、调整角度来直观地设计一个渐变,然后一键复制出可以直接使用的CSS代码。

CSS渐变的类型

线性渐变沿着一条直线从一个颜色过渡到另一个颜色。角度决定了过渡方向:0°是从下到上,90°是从左到右,180°是从上到下,270°是从右到左。设计中最常用的角度是135°(斜对角)和90°(水平)。0°到360°之间任意角度都合法。

CSS写法:linear-gradient(135deg, #667eea, #764ba2)

径向渐变从一个中心点向外呈圆形或椭圆形扩散,适合用来做聚光灯效果、按钮悬停状态,或者居中的视觉焦点元素。

CSS写法:radial-gradient(circle, #667eea, #764ba2)

现代浏览器的兼容性

线性和径向渐变在所有现代浏览器中都不需要任何厂商前缀就能正常渲染。早期版本的Safari和Chrome曾经需要加上-webkit-前缀渐变才能正确显示,这是CSS渐变语法还在标准化早期阶段留下的历史遗留问题,但如今常用的浏览器已经多年不需要这个前缀了,所以这个生成器输出的纯净、不带前缀的语法,在任何地方都能直接使用。

添加更多色标

生成器默认使用两种颜色,但CSS渐变其实支持在任意位置添加任意数量的颜色节点。要在中间加一个第三种颜色:

linear-gradient(135deg, #667eea 0%, #ff6b6b 50%, #764ba2 100%)

你也可以在特定的百分比位置指定色标,精确控制过渡发生的位置:

linear-gradient(90deg, #000000 0%, #000000 50%, #ff0000 50%, #ff0000 100%)

这样会形成一条清晰的分界线,而不是渐变过渡——在某些设计效果里很有用。

常用渐变配色

一些广受欢迎的渐变组合:

海洋:#2193b0 → #6dd5ed
日落:#FF512F → #DD2476
森林:#134E5E → #71B280
紫色幻梦:#667eea → #764ba2
火焰:#f7971e → #ffd200
夜空:#0f0c29 → #302b63 → #24243e

在CSS中使用渐变

background简写属性或background-image属性可以直接接受渐变函数:

.header {

background: linear-gradient(135deg, #667eea, #764ba2);

}

借助更高级的CSS技巧,渐变还可以应用到文字、边框和遮罩层上。

把渐变和图片结合使用

CSS允许用多层背景把渐变和背景图片叠加在一起:

.hero {

background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('photo.jpg') center/cover;

}

这样会在图片上叠加一层半透明的暗色渐变,提升首屏区域文字的可读性。

使用方法

用取色器选好两个颜色,拖动角度滑块设置过渡方向,预览会实时更新,让你在真正使用之前就能清楚看到渐变的效果。效果满意之后,一键复制生成的CSS代码,直接粘贴进你的样式表——没有导出步骤,不用下载图片,也不涉及任何构建流程。

为什么CSS渐变胜过图片渐变

在CSS渐变得到良好支持之前,设计师必须把渐变导出成PNG或JPEG图片文件才能用在网站上,这样不仅多了一个要下载的文件、增加了页面体积,除非用很大的尺寸精心导出,否则在高分辨率屏幕上还会显得模糊或出现色带。而CSS渐变是由浏览器根据屏幕实际需要的分辨率实时计算出来的,所以永远清晰锐利,可以缩放到任意尺寸而不需要额外文件,只需要改几个字符的代码就能立刻更换效果,不用重新导出图片。这也是为什么如今几乎每个现代网站在做这类效果时都用CSS渐变而不是图片文件。

挑选搭配和谐的颜色

当两个颜色之间存在某种视觉逻辑而不是随意碰撞时,渐变看起来才会显得精致。一个常见又可靠的做法是选两个在色轮上位置相近的颜色(类似色搭配,比如蓝色过渡到紫色),营造平静协调的观感;或者选两个在色轮上大致相对的颜色(互补色搭配,比如橙色过渡到蓝色),营造更大胆、对比度更高的效果。让两个颜色的明度保持相对接近,通常能让过渡显得更顺滑;而明度差异很大——比如深藏青过渡到浅黄——则会营造出更有戏剧张力、更有活力的渐变效果。直接在实时预览里动手尝试,比抽象地推敲色彩理论更快,因为你能立刻看出某个搭配是否适合你的具体设计。

应用在文字等元素上的渐变

除了普通背景之外,渐变还可以借助background-clip: text和透明文字颜色的组合直接应用在文字本身上,这是标题和logo制造多彩、抓眼效果时的常见手法,不需要依赖图片文件。同样的渐变语法也能用在边框上,还能和CSS遮罩结合实现更高级的形状效果,不过这些技巧比普通的背景渐变需要多一点配套的CSS代码。用这个生成器得到满意的渐变之后,值得记住的是,同样的色标组合可以在这几种不同效果之间复用,保持整体设计风格的一致性。

私密且即时

一切都完全在你的浏览器中运行,调整颜色或角度时预览即时更新,你设计的渐变不会被发送到服务器、记录或分享。

Gradient generator FAQ

What is a CSS gradient?: A CSS gradient is a smooth transition between two or more colors, defined using CSS's background or background-image property without any image file.
What is the difference between linear and radial?: A linear gradient transitions in a straight line at a given angle. A radial gradient radiates outward from a center point in circular or elliptical shapes.
Can I use more than two colors?: Yes, CSS supports multiple color stops. This generator uses two colors; for more complex gradients, add additional color stops manually in the CSS code.