Cut Text

Cut text and gold picture.

Gold Lettering

Gold Lettering

Note

To get your background image address load it in the page first then copy the address to your CSS. (see in cut text photo)

HTML

<div class="bgClip">
<span class="bgClip2" style="font-size: 60px;">Gold Lettering</span></div>

CSS

/*----------start----------Gold animated lettering--------------*/

.bgClip {
        box-shadow: inset 0px 0px 150px rgba(0,0,0,0.7);
        font-size: 36px;
        padding: 0px 5px 2px 5px;
}
.bgClip2 {
             font-family: 'Luckiest Guy';
             background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj16zziU7N9O9ga4Ri7JUG75M1r8_zkCVXXrtr6pXDsGncAOGRAygsGRsIVr-zANylISgqFAgcNFrGOOGv9phyF2xgnWuUohG5hIQgeWuW6tiEIyv0HJDBx8CRK1qioZ79tRH14y34ejRhf/s1600/gold_texture-joined-sm.jpg');       
 -webkit-background-clip: text;
    -moz-background-clip: text;
      -ms-background-clip: text;
             background-clip: text;
 -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
      -ms-text-fill-color: transparent;
             text-fill-color: transparent;
             font-weight: 700;
         line-height: .8;
           color: black;
         position: relative;
         background-repeat: repeat;
         background-position: 0 0;
-webkit-animation: BackgroundAnimated 55s linear infinite;
            animation: BackgroundAnimated 55s linear infinite;
}
    @keyframes BackgroundAnimated {
        0% {background-position: 0% 0%}
            50% {background-position: 100% 100%}
      100% {background-position: 0% 0%}
}
@-webkit-keyframes BackgroundAnimated {
        0% {background-position: 0% 0%}
            50% {background-position: 100% 100%}
      100% {background-position: 0% 0%}
}


}
/*------------end--------------Gold animated lettering-------------------*/