Fake SVG Text

04 Jun 2020

Visit hey.com. Then inspect the “Try it.’ element.

<span>Try it.</span>

Find the CSS for this element

.launch__preface span {
    color: transparent;
    background: url(/assets/89-36c492f….svg) center center/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
}

Then we do some test on color and background-clip:

See the effect of color: transparent

Then check the effect of background-clip: text

It’s so cool.

Let’s do a brief summary for this fake SVG text way:

  1. Set a SVG background
  2. Set the text color to transparent
  3. Set background to clip text mode
  4. The cool text show up.
Back to top