css实现多种渐变颜色色板配色代码-html代码-BFW代码库

css实现多种渐变颜色色板配色代码

代码语言：html

代码描述：css实现多种渐变颜色色板配色代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .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 scre.........完整代码请登录后点击上方下载按钮下载查看