css好看的颜色渐变,Css渐变配色收集

css

body{background-color: #272727}

.gradient--0 {

--gradient-start: #6DE195;

--gradient-start-text: '#6DE195';

--gradient-end: #C4E759;

--gradient-end-text: '#C4E759';

}

.gradient--1 {

--gradient-start: #41C7AF;

--gradient-start-text: '#41C7AF';

--gradient-end: #54E38E;

--gradient-end-text: '#54E38E';

}

.gradient--2 {

--gradient-start: #99E5A2;

--gradient-start-text: '#99E5A2';

--gradient-end: #D4FC78;

--gradient-end-text: '#D4FC78';

}

.gradient--3 {

--gradient-start: #ABC7FF;

--gradient-start-text: '#ABC7FF';

--gradient-end: #C1E3FF;

--gradient-end-text: '#C1E3FF';

}

.gradient--4 {

--gradient-start: #6CACFF;

--gradient-start-text: '#6CACFF';

--gradient-end: #8DEBFF;

--gradient-end-text: '#8DEBFF';

}

.gradient--5 {

--gradient-start: #5583EE;

--gradient-start-text: '#5583EE';

--gradient-end: #41D8DD;

--gradient-end-text: '#41D8DD';

}

.gradient--6 {

--gradient-start: #A16BFE;

--gradient-start-text: '#A16BFE';

--gradient-end: #DEB0DF;

--gradient-end-text: '#DEB0DF';

}

.gradient--7 {

--gradient-start: #D279EE;

--gradient-start-text: '#D279EE';

--gradient-end: #F8C390;

--gradient-end-text: '#F8C390';

}

.gradient--8 {

--gradient-start: #F78FAD;

--gradient-start-text: '#F78FAD';

--gradient-end: #FDEB82;

--gradient-end-text: '#FDEB82';

}

.gradient--9 {

--gradient-start: #BC3D2F;

--gradient-start-text: '#BC3D2F';

--gradient-end: #A16BFE;

--gradient-end-text: '#A16BFE';

}

.gradient--10 {

--gradient-start: #A43AB2;

--gradient-start-text: '#A43AB2';

--gradient-end: #E13680;

--gradient-end-text: '#E13680';

}

.gradient--11 {

--gradient-start: #9D2E7D;

--gradient-start-text: '#9D2E7D';

--gradient-end: #E16E93;

--gradient-end-text: '#E16E93';

}

.gradient--12 {

--gradient-start: #F5CCF6;

--gradient-start-text: '#F5CCF6';

--gradient-end: #F1EEF9;

--gradient-end-text: '#F1EEF9';

}

.gradient--13 {

--gradient-start: #F0EFF0;

--gradient-start-text: '#F0EFF0';

--gradient-end: #FAF8F9;

--gradient-end-text: '#FAF8F9';

}

.gradient--14 {

--gradient-start: #121317;

--gradient-start-text: '#121317';

--gradient-end: #323B42;

--gradient-end-text: '#323B42';

}

ul {

margin-top: 30px;

display: grid;

grid-template-columns: repeat(var(--columns), 1fr);

grid-auto-rows: 350px;

font-family: Geneva, Tahoma, Verdana, sans-serif;

color: #AAA;

font-size: 12px;

}

li {

position: relative;

text-align: center;

}

.gradient {

display: inline-block;

height: 250px;

width: 80%;

background: linear-gradient(33deg, var(--gradient-start), var(--gradient-end));

border-radius: 20px;

box-shadow: 0 5px 10px #0002;

}

.start-color, .end-color {

padding: 10px 0 0 10px;

}

.start-color:before, .end-color:before {

content: '';

width: 15px;

height: 15px;

border-radius: 999px;

display: inline-block;

}

.start-color:after, .end-color:after {

padding: 0 10px;

vertical-align: 2px;

border-radius: 999px;

display: inline-block;

}

.end-color:before { background-color: var(--gradient-start); }

.end-color:after { content: var(--gradient-start-text); }

.start-color:before { background-color: var(--gradient-end); }

.start-color:after { content: var(--gradient-end-text); }

@media screen and (min-width: 1750px) { :root { --columns: 8; } }

@media screen and (max-width: 1750px) { :root { --columns: 7; } }

@media screen and (max-width: 1500px) { :root { --columns: 6; } }

@media screen and (max-width: 1250px) { :root { --columns: 5; } }

@media screen and (max-width: 1000px) { :root { --columns: 4; } }

@media screen and (max-width: 750px) { :root { --columns: 6; } }

@media screen and (max-width: 625px) { :root { --columns: 5; } }

@media screen and (max-width: 500px) { :root { --columns: 4; } }

@media screen and (max-width: 375px) { :root { --columns: 3; } }

@media screen and (max-width: 250px) { :root { --columns: 2; } }

@media screen and (max-width: 750px) {

ul {

margin-top: 15px;

grid-auto-rows: 190px;

font-size: 10px;

}

.gradient {

height: 125px;

}

.start-color, .end-color {

padding: 7px 0 0 10px;

}

}