html字体发光颜色怎么变,css实现文字渐变色/内发光

方法一：(不可添加文字阴影)

.main {

background: linear-gradient(180deg, red, blue);

-webkit-background-clip: text;

color: transparent;

font-size: 30px;

}

我是利用background-clip变色的文字

效果图：

image.png

方法二：(可添加文字阴影)

h1 {

position: relative;

font-size: 30px;

color: palevioletred;

text-shadow: -2px 2px 2px rgba(0, 0, 0, 1);

}

h1[data-content]:after {

position: absolute;

content: attr(data-content);

text-decoration: none;

top: 0;

left: 0;

z-index: 2;

color: yellow;

/* -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); */

-webkit-mask-image: linear-gradient(180deg, yellow 50%, transparent);

-webkit-mask-size: 100% 100%;

}

我是利用mask-image变色的文字

效果图：

image.png

方法三：(可添加文字阴影)

.gradient-text-three {

fill: url(#SVGID_1_);

font-size: 16px;

font-weight: bolder;

text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);

}

我是利用svg变色的文字

效果图：

image.png

案列：

无标题文档

.text {

font: 100px '微软雅黑';

font-weight: bold;

text-shadow: 1px 2px 3px rgba(67, 8, 7, 0.8);

/* 发光色 */

color: #c60df0;

position: relative;

}

.text:before {

content: '好奇心';

/* 控制文字中间颜色 */

text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);

position: absolute;

left: 0px;

color: rgba(0, 0, 0, 0);

}

.text2 {

font: 100px '微软雅黑';

font-weight: bold;

position: relative;

text-shadow: 1px 2px 3px rgba(67, 8, 7, 0.8);

color: #c60df0;

}

.text2:after {

position: absolute;

left: 0px;

content: '好奇心';

color: #ea0000;

-webkit-mask-image: -webkit-gradient(

linear,

0 0,

0 100%,

from(rgba(0, 0, 0, 0.9)),

color-stop(40%, rgba(0, 0, 0, 0.5)),

to(rgba(0, 0, 0, 0))

);

text-shadow: 0px 0px 2px rgba(234, 0, 0, 1);

}

好奇心

好奇心

效果图：

image.png