css渐变背景，linear-gradient()线性渐变和radial-gradient()径向渐变

咸虾米_

已于 2024-09-07 10:20:26 修改

阅读量2.5k

点赞数 13

分类专栏： HTML5+CSS3 文章标签： css 前端

于 2023-11-13 23:37:17 首次发布

本文链接：https://blog.csdn.net/qq_18798149/article/details/134389038

版权

HTML5+CSS3 专栏收录该内容

5 篇文章

订阅专栏

在这里插入图片描述

嗨，大家好，我是爱搞知识的咸虾米。
许多APP、小程序、网站等都喜欢采用渐变色背景，这样做不但可以增加设计感，而且能提升品牌辨识度。
所以，今天使用css的线性渐变和径向渐变，给大家将这几种不同类型的渐变背景写出来。
首先给大家分别展示几款常见的渐变色背景，然后我们依次完成编写。

详细的视频教程演示：https://www.bilibili.com/video/BV1ga4y1D78d/

1.简单的线性渐变

在这里插入图片描述

.layout{
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(#FFE8E9,rgba(0,0,0,0) 200px);
}

2.层叠多层的渐变（左右+上下+背景图）

在这里插入图片描述

.layout{
	width: 100%;
	min-height: 100vh;
	background:
	url(/static/bg.png) no-repeat 80% 50px,
	linear-gradient(to bottom, transparent -100px,#fff 300px),
	linear-gradient(to right, #D2EEF9,#FFD1DE);
}

3.多重径向渐变，（线性渐变+径向渐变的组合）

在这里插入图片描述

.layout{
	width: 100%;
	min-height: 100vh;
	background: 
	linear-gradient(to bottom,transparent,#fff 400px),
	radial-gradient(90% 300px at left top, #95E0DC, transparent),
	radial-gradient(60% 300px at right top, #D3CBFC, transparent);
}

4.更加复杂的混合型渐变背景

在这里插入图片描述

.layout{
    width: 100%;
    height: 100vh;
    background: 
    linear-gradient(to bottom, transparent, #fff 260px),
    radial-gradient(20% 150px at 70% 230px, rgba(0,210,255,0.2),transparent),
    radial-gradient(40% 180px at 80% 50px, rgba(249,167,176,0.3),transparent),
    radial-gradient(50% 300px at 90% 100px, rgba(212,230,241,0.8),transparent),            
    radial-gradient(20% 150px at 0px 0px, rgba(162,213,239,0.5),transparent),
    radial-gradient(30% 200px at 100px 50px, rgba(249,167,176,0.5),transparent),
    #FFF0F5;
}