You might have noticed that Gradient background is being used by several websites and applications these days. Using a blend of proper color gradients would make the application look visually appealing.

CSS Gradient Text

Creating Gradient Text

With CSS 3’s background-clip and text-fill-color properties, we can easily make Gradient text effect. Please note that this code works only in webkit browsers. Here's an example.

<style>
.txt-gradient-example{
    background: #12c2e9;
    background: -webkit-linear-gradient(to left, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(to left, #f64f59, #c471ed, #12c2e9);
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>
<h1 class="txt-gradient-example">CSS Gradient Text</h1>

You can find a collection of best gradients and it's CSS code from uiGradients.

Was this post helpful? Let me know in the comments below.

Create Gradient Text With CSS

Creating Gradient Text

You might also like