Create Gradient Text With CSS

With CSS 3’s background-clip and text-fill-color properties, we can easily make Gradient text effect.

Create Gradient Text With CSS

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.


Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.