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.