Here is How you create Gradient Underline Text.

September 01, 2021

Step 1 - Add HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gradient Underline</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="section">
      <h2>Gradient Underline</h2>
    </section>
  </body>
</html>

Step 2 - Add CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.section {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

h2 {
  font-size: 5rem;
  font-weight: 900;
  color: rgb(0, 162, 255);
  margin-bottom: 1.5rem;
  text-align: center;
  text-decoration: none;
  background-image: linear-gradient(90deg, rgb(255, 0, 106), rgb(0, 110, 255));
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0% 3px;
  transition: background-size 500ms ease-in-out;
}

h2:hover {
  background-size: 100% 3px;
}

And Then Your are done your gradient under line on hover is ready.


Image of Preet Suthar

Written by Preet Suthar Learning and trying to make somthing better then before. You should follow them on Twitter