好看的24种CSS渐变效果汇总

CSS3渐变是啥

首先渐变字面意思就是渐渐的变了，我们常用于背景色的设置。官方说法就是在两个或多个颜色之间进行平稳的过渡。它的优势在于一些背景色想要好的效果时候不用自己PS做图，然后再设置背景图啥的，我们可以直接通过CSS3渐变（gradient）的样式属性来进行设置，减少页面资源请求不说，还能随意调整色系，岂不快活！

CSS3渐变种类

线性渐变（linear-gradient）

原理说明

线性的话就是指渐变色可以按照不同的方向去实现颜色的不同展示效果，支持上/下/左/右/对角线等多个方向进行。其中颜色是可以加多种的，方便说明我用了两种；

• 默认属性（从上到下）：background-image: linear-gradient(#e66465, #9198e5);
• 设置方向（从左往右）：background-image: linear-gradient(to right,#e66465, #9198e5);
• 对角方向（从左上往右下）：background-image: linear-gradient(to bottom right,#e66465, #9198e5);
• 设置角度（从左往右）：background-image: linear-gradient(45deg,#e66465, #9198e5);

好看的线性渐变效果

径向渐变（ radial-gradient）

径向渐变是啥?

CSS径向渐变就好比是一个框，你得以某中心，往外发散设置渐变色，或者其他形状设置渐变色，你也可以理解为背景色辐射其属性设置可以指定渐变的中心、形状（圆形或椭圆形）、大小。正常情况下，渐变的中心是 center-【表示在中心点】，渐变的形状是 ellipse-【表示椭圆形】，渐变的大小是 farthest-corner【表示到最远的角落】

CSS语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

参数	含义	默认值
shape	定义形状（圆形或者椭圆）	ellipse（表示椭圆形）注意：容器宽高不相等
size	定义大小	farthest-corner（表示到最远的角落）
position	定义圆心的位置	center（表示在中心点）
start-color	定义开始的颜色值	必填，无默认值
...	last-color	定义结束的颜色值 必填，无默认值

径向渐变常用实例

其实颜色搭配就看个人喜好了，主要应用方式包括如下：

• 像素位置设置：background: radial-gradient(978px at 1.8% 4%, rgb(162, 208, 254) 0.1%, rgba(193, 94, 245, 0.73) 100.2%)
• 形状位置设置：background: radial-gradient(circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%)

具体实现如下：