In this post I will walk you through about creating gradient text in css.
You can easily add gradient to your text by adding two properties in css to the element.
h1 {
background: linear-gradient(to right, #93fd33 0%,#1A9DF4 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
-webkit-background-clip:text , and -webkit-text-fill-color:transparent properties are must to add graident to your text.
Full Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Gradient</title>
<meta name="description" content="How to make gradient text.">
<style>
body {
background-color:black;
}
.text1 {
font-family:'Poppins';
font-size:192px;
margin:100px;
background: linear-gradient(to right, #93fd33 0%,#1A9DF4 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
</style>
</head>
<body>
<h1 class="text1">Hello</h1>
</body>
</html>
Top comments (0)