DEV Community

13 CSS Tricks that will give you an adrenaline rush🤯

Smitter on July 17, 2023

CSS is gaining powers with recent web evolution. And it is very clever with tricks that were long existing or that have emerged. Perhaps tricks sha...

Read full post

Samuel Braun • Jul 20 '23

Great Article!! Lets keep it going 😂

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

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>