html渐变色CSS3横向渐变,CSS3渐变背景特性演示（线性、径向和双色调渐变）

CSS

语言：

CSSSCSS

确定

/* The Gradients ---------------------------------------- */

.block-1 {

background: -webkit-linear-gradient(135deg, #fddf50 20%, #65ca03 80%);

background: -webkit-linear-gradient(315deg, #fddf50 20%, #65ca03 80%);

background: linear-gradient(135deg, #fddf50 20%, #65ca03 80%);

}

.block-2 {

background: -webkit-radial-gradient(#111111, #000000);

background: radial-gradient(#111111, #000000);

}

.block-3 {

background: -webkit-radial-gradient(#3c3b52, #252233);

background: radial-gradient(#3c3b52, #252233);

}

.block-4 {

background: -webkit-linear-gradient(-90deg, #4567b2 20%, #8ab9ff 80%);

background: -webkit-linear-gradient(right, #4567b2 20%, #8ab9ff 80%);

background: linear-gradient(-90deg, #4567b2 20%, #8ab9ff 80%);

}

.block-5 {

background: -webkit-linear-gradient(155deg, #72abff 0%, #2c4784 90%);

background: -webkit-linear-gradient(295deg, #72abff 0%, #2c4784 90%);

background: linear-gradient(155deg, #72abff 0%, #2c4784 90%);

}

.block-6 {

background: -webkit-linear-gradient(-60deg, #8ab9ff 50%, #4567b2 50.1%);

background: -webkit-linear-gradient(150deg, #8ab9ff 50%, #4567b2 50.1%);

background: linear-gradient(-60deg, #8ab9ff 50%, #4567b2 50.1%);

}

.block-7 {

background: -webkit-linear-gradient(135deg, #ffa000 20%, #ff5000 80%);

background: -webkit-linear-gradient(315deg, #ffa000 20%, #ff5000 80%);

background: linear-gradient(135deg, #ffa000 20%, #ff5000 80%);

}

.block-8 {

background: -webkit-linear-gradient(-45deg, #141e31 50%, #233a54 50.1%);

background: -webkit-linear-gradient(135deg, #141e31 50%, #233a54 50.1%);

background: linear-gradient(-45deg, #141e31 50%, #233a54 50.1%);

}

.block-9 {

background: -webkit-linear-gradient(right, #243B55, #141E30);

background: linear-gradient(to left, #243B55, #141E30);

}

.block-10 {

background: -webkit-linear-gradient(180deg, #243B55 50%, #141E30 50.1%);

background: -webkit-linear-gradient(top, #243B55 50%, #141E30 50.1%);

background: linear-gradient(180deg, #243B55 50%, #141E30 50.1%);

}

.block-11 {

background: -webkit-linear-gradient(120deg, #fbef97 20%, #ffe41d 80%);

background: -webkit-linear-gradient(330deg, #fbef97 20%, #ffe41d 80%);

background: linear-gradient(120deg, #fbef97 20%, #ffe41d 80%);

}

.block-12 {

background: -webkit-linear-gradient(right, #232526, #414345);

background: linear-gradient(to left, #232526, #414345);

}

.block-13 {

background: -webkit-linear-gradient(right, #56ab2f, #a8e063);

background: linear-gradient(to left, #56ab2f, #a8e063);

}

.block-14 {

background: -webkit-linear-gradient(-45deg, #57ac30 50%, #a6df62 50.1%);

background: -webkit-linear-gradient(135deg, #57ac30 50%, #a6df62 50.1%);

background: linear-gradient(-45deg, #57ac30 50%, #a6df62 50.1%);

}

.block-15 {

background: -webkit-linear-gradient(-45deg, #ff5000 50%, #ffa000 50.1%);

background: -webkit-linear-gradient(135deg, #ff5000 50%, #ffa000 50.1%);

background: linear-gradient(-45deg, #ff5000 50%, #ffa000 50.1%);

}

.block-16 {

background: -webkit-radial-gradient(#13941d, #1d512a);

background: radial-gradient(#13941d, #1d512a);

}

.block-17 {

background: -webkit-linear-gradient(left, #b6eae1 10%, #D2FBAD 90%);

background: linear-gradient(90deg, #b6eae1 10%, #D2FBAD 90%);

}

.block-18 {

background: -webkit-linear-gradient(-90deg, #949494 10%, #efefef 90%);

background: -webkit-linear-gradient(right, #949494 10%, #efefef 90%);

background: linear-gradient(-90deg, #949494 10%, #efefef 90%);

}

.block-19 {

background: -webkit-linear-gradient(-90deg, #000000 50%, #eee 50.1%);

background: -webkit-linear-gradient(right, #000000 50%, #eee 50.1%);

background: linear-gradient(-90deg, #000000 50%, #eee 50.1%);

}

.block-20 {

background: -webkit-linear-gradient(-45deg, #000 50%, #eee 50.1%);

background: -webkit-linear-gradient(135deg, #000 50%, #eee 50.1%);

background: linear-gradient(-45deg, #000 50%, #eee 50.1%);

}

.block-21 {

background: -webkit-linear-gradient(0deg, #949494 10%, #efefef 90%);

background: -webkit-linear-gradient(bottom, #949494 10%, #efefef 90%);

background: linear-gradient(0deg, #949494 10%, #efefef 90%);

}

.block-22 {

background: -webkit-linear-gradient(-45deg, #225e9e 0%, #712c69 100%);

background: -webkit-linear-gradient(135deg, #225e9e 0%, #712c69 100%);

background: linear-gradient(-45deg, #225e9e 0%, #712c69 100%);

}

.block-23 {

background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%);

background-image: radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%);

}

.block-24 {

background: -webkit-linear-gradient(-45deg, #89ABE3 0%, #F2DDDE 100%);

background: -webkit-linear-gradient(135deg, #89ABE3 0%, #F2DDDE 100%);

background: linear-gradient(-45deg, #89ABE3 0%, #F2DDDE 100%);

}

/* Layout stuff ---------------------------------------- */

* {

box-sizing: border-box;

}

body {

font-family: 'Josefin Sans', sans-serif;

background: #121212;

overflow-x: hidden;

}

.blocks {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

padding: 50px 0 100px;

}

.block {

-webkit-box-flex: 0;

-ms-flex: 0 0 350px;

flex: 0 0 350px;

height: 350px;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

color: white;

text-shadow: 1px 1px 0 black;

margin: 15px;

border-radius: 6px;

cursor: pointer;

-webkit-transition: 500ms;

transition: 500ms;

}

.block.embiggen {

width: 100% !important;

height: 100% !important;

position: fixed;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: 0;

-webkit-animation: scaleUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.9) both;

animation: scaleUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.9) both;

}

#output {

position: fixed;

left: 0px;

color: #fff;

width: 100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

background: rgba(0, 0, 0, 0.3);

box-sizing: border-box;

font-weight: normal;

text-align: center;

bottom: 0px;

height: 80px;

opacity: 0;

-webkit-transition: all 1s;

transition: all 1s;

z-index: -1;

}

#output.embiggen {

z-index: 1;

opacity: 1;

}

.click {

font-size: 1.2em;

color: rgba(255, 255, 255, 0.2);

position: absolute;

left: 20px;

top: -5px;

z-index: -1;

}

input {

position: absolute;

top: -100px;

}

label:after {

display: block;

position: fixed;

top: 15px;

right: 20px;

cursor: pointer;

font-family: FontAwesome;

font-style: normal;

font-weight: normal;

text-decoration: inherit;

color: #444;

font-size: 28px;

-webkit-transition: 400ms;

transition: 400ms;

}

label:hover:after {

color: #888;

}

.layout-1:after {

content: "\f009";

}

.layout-2:after {

content: "\f00a";

right: 55px;

}

.layout-3:after {

content: "";

top: 100px;

background: #444;

width: 28px;

height: 25px;

border-radius: 2px;

}

#grid:checked ~ .blocks .block {

-webkit-box-flex: 0;

-ms-flex: 0 1 350px;

flex: 0 1 350px;

height: 350px;

}

#list:checked ~ .blocks .block {

-webkit-box-flex: 0;

-ms-flex: 0 1 300px;

flex: 0 1 300px;

height: 80px;

}

@-webkit-keyframes scaleUp {

0% {

-webkit-transform: scale(0);

transform: scale(0);

}

100% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

@keyframes scaleUp {

0% {

-webkit-transform: scale(0);

transform: scale(0);

}

100% {

-webkit-transform: scale(1);

transform: scale(1);

}

}