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 {
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0