<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 60px;
background-image: linear-gradient(135deg,red,blue);
background-clip:text;
-webkit-background-clip:text;
color: transparent;
}
</style>
</head>
<body>
<p>
我是渐变文字
</p>
</body>
</html>
文字从左到右渐变
background: linear-gradient(to right, #1ca639, #afe311);
<h2 class="text-gradient">从上到下渐变</h2>
.text-gradient {
display: inline-block;
color: green;
font-size: 10em;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<p class="first_neon">first_neon</p>
.first_neon {
background: none repeat scroll 0 0 #000000;
border: 1px solid;
border-radius: 15px;
color: #FFFFFF;
cursor: pointer;
float: left;
font-family:"Warnes";
margin: auto;
padding: 26px 10px;
text-align: center;
text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE;
transition: text-shadow 0.5s ease 0s;
width: 250px;
}