DEV Community

muneebejazz
muneebejazz

Posted on

Create beautiful gradient text in CSS with three lines of code!

#html #css #uiweekly #webdev

In this post I will walk you through about creating gradient text in css.

Image description

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;
}
Enter fullscreen mode Exit fullscreen mode

-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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)