文字渐变+阴影

.titleFont{

font:.24rem/.6rem "微软雅黑";

text-align:center;

background: -webkit-linear-gradient(left, #2ce5d8 , #fbeb70);    /* 背景色渐变 */

-webkit-background-clip: text;        /* 规定背景的划分区域 */

-webkit-text-fill-color: transparent;  /* 防止字体颜色覆盖 */

position: relative;

letter-spacing: .03rem;

z-index: 10;

}

.titleFont:after{

content: attr(data-text);

position: absolute;

left: 0;

top: -.12rem;

letter-spacing: .03rem;

z-index: -1;

text-shadow:2px 1px 2px #000;

}

css

html

效果图