CSS好看的背景颜色样式（持续更新）

1 红色 #D24D57

2 绿色 #26A65B

3 橙色 #EB7347

4 黑色 #2C3E50

5 暗绿色 #84AF9B

6 橙红色 #FC9D99

7 草绿色 #AEDD81

8 蓝色 #00CCFF

9 灰色 #D0D0D0

10 渐变

代码：

background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);

11 JS 随机颜色
代码：

function randomHexColor() { //随机生成十六进制颜色
                var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
                while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
                    hex = '0' + hex;
                }
                return '#' + hex; //返回‘#'开头16进制颜色
            }

12 JS 字体 渐变色（自定义）
代码：

//挑选自己喜欢的双色，调用gradient()，修改dom对象


// var ColorA = "#c597ff";
        var ColorA = "#be00ff";
        // var ColorB = "#73e7a9";
        var ColorB = "#e70065";
        // 颜色#FF00FF格式转为Array(255,0,255)
        function color2rgb(color)
        {
            var r = parseInt(color.substr(1, 2), 16);
            var g = parseInt(color.substr(3, 2), 16);
            var b = parseInt(color.substr(5, 2), 16);
            return new Array(r, g, b);
        }

        // 颜色Array(255,0,255)格式转为#FF00FF
        function rgb2color(rgb)
        {
            var s = "#";
            for (var i = 0; i < 3; i++)
            {
                var c = Math.round(rgb[i]).toString(16);
                if (c.length == 1)
                    c = '0' + c;
                s += c;
            }
            return s.toUpperCase();
        }

        // 生成渐变
        function gradient()
        {
            let myText = document.querySelector("#d1");
            var str = myText.innerText;
            var result = "";
            var Step = str.length - 1;

            var Gradient = new Array(3);
            var A = color2rgb(ColorA);
            var B = color2rgb(ColorB);

            for (var N = 0; N <= Step; N++)
            {
                for (var c = 0; c < 3; c++) // RGB通道分别进行计算
                {
                    Gradient[c] = A[c] + (B[c]-A[c]) / Step * N;
                }
                result += "<font color=" + rgb2color(Gradient) +
                    ">" + str.charAt(N) + "</font>";
            }
            myText.innerHTML = result;
        };

13 CSS 炫彩字体

代码：

#name {
            font-size: 200px;
            font-weight: 900;
            color: #8c888b;
            background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
        -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
        -ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
            color: transparent;
            /*设置字体颜色透明*/
            -webkit-background-clip: text;
            /*背景裁剪为文本形式*/
            animation: ran 10s linear infinite;
            /*动态10s展示*/
        }

14 CSS div边框 阴影

代码：

<div class="image"><img src="default.jpg" /></div>
 
.image{box-shadow: 0 0 3px #000;}