Background-Clip: Text

I had a lot of fun dabbling in CSS3 on a recent post, but had to hold back a bit to keep things looking presentable in most browsers. To carry out the DIN typeface I chose into the header, I used a transparent png with the letters knocked out to achieve that subtle yellow to blue fade animation. After seeing a shot of my code on Dribbble, Chandler Van De Water challenged me to create the effect with selectable text. Happy to oblige, I came up with this example:

.masked{
	background: url(/bgclip/img/paint.png) repeat, white;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-animation-name: masked-animation;
	-webkit-animation-duration: 40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
@-webkit-keyframes masked-animation {
	0% {background-position: left bottom;}
	100% {background-position: right bottom;}
}

At the moment it will only work in webkit, so fire up Safari or Google Chrome: View Example

28 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Chandler Van De Water

    I’m going to comment on this everywhere I can find to. How long do you think before a trick like this works in IE (if ever)? ;)

    Hotness, Trent.

  • Trevor Gerzen

    I had the same thought when I see your CSS3 in Transition post. That’s not to take away from the hawtness! This is pretty fantastic.

    Someone said this is going to become the new wet floor and I don’t know that there’s anything wrong with that ;)

  • Robbie Manson

    Hey Trent, thanks for the tip! I’ve just made use of -webkit-background-clip: text on my spruced-up 404 page:

    http://blog.robbiemanson.com/404

    Cheers :)

  • pete

    I’ve found that you can prevent the other browsers from filling the background with the background image by using a multiple background declaration with a -webkit-gradient thrown in, which will prevent the other browsers from applying the background at all (the actual image background needs to come first, since webkit won’t animate gradients and will only attempt to animate the first background).

    ie (here’s hoping code will post):
    color:#333 /* for other browsers */

    /* rest is for webkit only */
    background:url(/bgclip/img/paint.png) repeat,-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0))) no-repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-animation-name: masked-animation;

  • Ant Gray

    How to make fallback? I only found that way:

    h3{ /* fallback goes here */ }
    .webkit h3{ /* webkit fancy code goes here */ }

    but how it correct?

  • simurai

    Hi Trent. Thanks for posting this. I was pretty amazed when I saw it was real text. I played around a bit too and tried to create a glass text effect: http://lab.simurai.com/css/glass/

  • Trent

    @simurai: Great work! Thanks for stopping by & sharing that link. I also got a kick out of your Carve Me demo.

  • simurai

    @Trent: Thanks. Yeah, “Carve Me” was more an accident than intended.. ;-) Unfortunately it doesn’t look good on every background. Bright ones work best.

  • AEM

    Hey!

    I tried to emulate this property on inline SVG for Mozilla and Opera:

    http://www.myadzel.ru/tests/html/text-background/

    Sort happened.

  • Katie O

    BEAUTIFUL!

  • Rinku Thakur

    That was amazing i ll try to use it. Thanx a lot for this

  • Mick

    Are there any plans to include CSS for -moz support?
    I’m running FF Nightly which handles animation support beautifully but I have found that not many developers are supporting this yet.

  • Ankit Doshi

    What is the purpose of using 8000 pixel wide paint.png ?

  • Trent

    @Ankit Doshi: When I created the post I included a webkit (chrome or safari) animation where the background colors for the title banner pan horizontally.

  • Sam Marchant

    Hi, I have been trying to implement this rule into my new portfolio design, although I cannot get it to work :(

    Here is the code:

    Sam Marchant Portoflio website

    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {margin: 0; padding: 0; border: 0}

    body{background:url(images/bg.png) repeat}

    .outer_border{width:1000px; height:1542px;margin:90px auto 90px auto;border-top:2px solid #fbecd6; border-right:2px solid #fbecd6; border-left:2px solid #fbecd6;}

    .inner_border_container{width:978px; height:1522px; margin: 10px auto; border-top:2px solid #fbecd6; border-right:2px solid #fbecd6; border-left:2px solid #fbecd6;}

    .welcome{font-family:League Gothic ;font-size:310px; text-transform:uppercase; margin:auto; width:860px;height:270px;-webkit-mask-image:url(images/mask.png);
    -o-mask-image:url(images/mask.png);
    -moz-mask-image:url(images/mask.png);
    mask-image:url(images/mask.png);}

    welcome


  • Trent

    @Sam Marchant: Could you put something on a site like JSFiddle rather than posting code here? It’s easier to diagnose for sure.

  • Andrew Jackson

    One thing to check for, for the beginners out there like myself is declaring W3C DTD XHTML 1.0 Transitional
    doctype and also 1999 xhtml html tag, Google those and copy and paste at the top of your page.
    Correct me if I am wrong please.Thank you.

  • joep

    Hi, I simply cant get this code working on the background of my div :S

    I thought these were the only lines I need:

    .masked{
    -webkit-animation-name: masked-animation;
    -webkit-animation-duration: 40s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    }
    @-webkit-keyframes masked-animation {
    0% {background-position: left bottom;}
    100% {background-position: right bottom;}
    }

    But im just a newbie so cant figure it out myself ><

  • Trent

    @joep: Maybe put something on http://jsfiddle.net/ so we can help.

  • joep

    Hey Trent,

    Here you go!
    http://jsfiddle.net/gLmvn/1/

    The black lines you see are frankly not lines but its a background of a div where I want the gradient to animate diagonally so that it looks like the borders are animating.

    This effects would seem really awesome if it can be done properly and compatible for common browsers.

  • Trent

    @joep: Oh, I thought this would have actual text or animations in the fiddle. I’m not thinking I’m going to be of much help here... Maybe try the CSS Tricks forum. Good luck!

  • wolfiG

    Joep,

    why did you leave this lines out?

    background: url(/bgclip/img/paint.png) repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

    They are the key to make this work. And of course you’ll need the png file from here: http://trentwalton.com//bgclip/img/paint.png

    By the way your four lines can be combined to this:

    -webkit-animation: gradientText 20s linear infinite;

    Again as of today that does not work with anything but Safari and Chrome. No matter how much you want it to. Moz and CCS3 do not support background-clip - which is what this is all about.

    Have fun playing.

  • Ben

    For anyone still reading this, I’ve put it on jsFiddle (working on Chrome for me!):

    http://jsfiddle.net/NueeG/

    If anyone has a solution for Firefox/IE yet, give us a shout!

  • Abid Riaz

    @Ben: Thanks Ben

  • Vishnu

    @wolfiG: Hey Thanks Dude...

Leave a Reply