Good design is in the details.
A simple text gradient can transform your UI.
Flat colors are great, but gradients bring extra depth and personality to your typography. With just three lines of CSS, you can turn any text into a gradient without using images or extra elements.
How it works?
- A linear gradient sets the background with a smooth transition between colors.
- The background-clip: text; property ensures the gradient follows the text shape.
- Setting color: transparent; hides the original text color, making the gradient visible.
Why use this technique?
- It’s a lightweight solution that doesn’t require additional elements.
- The effect works on any font size and adapts seamlessly to different layouts.
- You can create endless variations by adjusting colors and angles.
Perfect for headlines and UI elements that need an extra visual impact.
Browser support is great. Over 97% of users can see the effect!
And if you want to go even further, you can animate it with @property variables and keyframes animation.
<article>
<h1>Theosoti.com</h1>
<p>For best CSS content</p>
</article>
article {
background: linear-gradient(to right, deeppink, orange);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Full code available here: https://codepen.io/emgarf/pen/ogNoRPp
To learn more tips about CSS, make sure to join my newsletter below ❤️