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.

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>

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site