Create Gradient Text With CSS

Create Gradient Text With CSS

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

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.

    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;
<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.