Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a gradient text effect with CSS?
Asked on Feb 06, 2026
Answer
Creating a gradient text effect in CSS involves using a combination of background properties and text transparency. Here's how you can achieve this effect.
<!-- BEGIN COPY / PASTE -->
<style>
.gradient-text {
font-size: 2em;
font-weight: bold;
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
color: transparent;
}
</style>
<div class="gradient-text">Gradient Text</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "background" property applies a linear gradient from left to right.
- "-webkit-background-clip: text" clips the background to the text, making the gradient visible only on the text.
- "color: transparent" ensures the text itself is not visible, only the gradient.
- This technique is widely supported in modern browsers, but always check compatibility for older versions.
Recommended Links:
