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.
Subscribe
Join the newsletter to get the latest updates.
Join the conversation.