css3渐变色板配色代码

.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;
  list-style-type:none;
}

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;
  }
}