CSS Gradient Text Color Examples

Updated: July 29, 2021 By: A Goodman Post a comment

A few examples of creating gradient text in CSS.

Example 1: Linear-gradient text.

Screenshot:

The code:

<html lang="en">
  <head>
    <title>Kindacode.com</title>
    <style>
      .logo {
        margin: 50px;
        font-size: 50px;
        background: linear-gradient(to right, #1565c0, #e3f2fd 60%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>

  <body>
    <div>
      <h1 class="logo">KINDACODE.COM</h1>
    </div>
  </body>
</html>

Example 2: Radial-gradient Text

Screenshot:

The code:

<html lang="en">
  <head>
    <title>Kindacode.com</title>
    <style>
      body {
        background:purple;
      }

      .logo {
        margin: 20vh 20vw;
        font-size: 50px;
        background-image: radial-gradient(red, yellow, green);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>

  <body>
    <div>
      <h1 class="logo">KINDACODE.COM</h1>
    </div>
  </body>
</html>

Example 3: Repeating-linear-gradient Text

Screenshot:

The code:

<html lang="en">
  <head>
    <title>Kindacode.com</title>
    <style>
      body {
        background: #333;
      }

      .logo {
        margin: 20vh 20vw;
        font-size: 50px;
        background-image: repeating-linear-gradient(
          to bottom right,
          red,
          yellow 10%,
          green 20%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>

  <body>
    <div>
      <h1 class="logo">KINDACODE.COM</h1>
    </div>
  </body>
</html>

Final Words

We’ve gone through some examples of gradient text color. If you’d like to learn more about CSS, take a look at the following:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles