CSS Text Gradient Generator.In this post I’ll show how we can create a gradient pattern text in html using CSS. To generate gradient pattern we need to set background property of our text to a gradient pattern. And important thing is “-webkit-background-clip” property. We need to set -webkit-background-clip property to text to create css text gradient.
Below is the code with text gradient it will create :
<html>
<head>
<title>CSS Text Gradient</title>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body style="background-color:#000;">
<style>
h1 {
font-family: 'Lobster', cursive;
font-size: 72px;
background: -moz-linear-gradient(-45deg, rgba(252,238,50,1) 0%, rgba(252,50,50,1) 29%, rgba(252,47,126,1) 43%, rgba(252,47,126,1) 68%, rgba(252,40,96,1) 73%, rgba(232,0,123,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(252,238,50,1) 0%,rgba(252,50,50,1) 29%,rgba(252,47,126,1) 43%,rgba(252,47,126,1) 68%,rgba(252,40,96,1) 73%,rgba(232,0,123,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(252,238,50,1) 0%,rgba(252,50,50,1) 29%,rgba(252,47,126,1) 43%,rgba(252,47,126,1) 68%,rgba(252,40,96,1) 73%,rgba(232,0,123,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#555555, endColorstr=#666666);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<h1>ParallelCodes();</h1>
</body>
And below is the result :
