DEV Community

Clément Gaudinière
Clément Gaudinière

Posted on • Edited on

3 2

Write a text with a color gradient

Today I offer you a CSS tip. In CSS, gradients are very popular, they allow a clean and pretty design. It also happens that we want to use the "color" property to apply a gradient to a text, unfortunately at the moment this feature is not supported by web browsers. That's why I propose you a simple tutorial to apply a linear gradient to a text.

You can see below the final result:

To do this, we will use "webkit" extensions. First of all we will add "-webkit-background-clip" which will allow to apply a gradient to the text.
Learn more...

Then we will add this property: "-webkit-text-fill-color" which allows to define the color used to draw the content of the letters.
Learn more...

Finally, we will apply the gradient with the property: "background", which is a fundamental property of CSS.

The complete code :

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
       font-size: 72px;
       background: -webkit-linear-gradient(350deg, #22c1c3, #fd2df5);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-align: center;
      }
    </style>
  </head>

  <body>

    <h1>Text Gradient </h1>  

  </body>

</html>
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
clementgaudiniere profile image
Clément Gaudinière

I'm glad I could help you !

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more