DEV Community

Discussion on: 13 CSS Tricks that will give you an adrenaline rush🤯

View post
Collapse
 
samuel-braun profile image
Samuel Braun •

Great Article!! Lets keep it going 😂
Image description

We can use background-clip text to make text have a gradient:

h2 {
    background: -webkit-linear-gradient(45deg, gold, lightblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Beware of cross-browser support though. If you want to support pretty much all browsers you can use svg instead to achieve the same effect:

<svg width="100%" height="100%">
  <defs>
    <linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0%" stop-color="orange" />
      <stop offset="100%" stop-color="purple" />
    </linearGradient>
  </defs>

  <text x="50%" y="50%" font-family="Verdana" font-size="35" text-anchor="middle" fill="url(#Gradient)">
    Gradient Text
  </text>
</svg>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
smitterhane profile image
Smitter •

Great technique,
The svg tactic is new to me and its a clever way for cross browser compat