Question

I’ve seen it done in SVGs: the text fill is an image rather than a color; and I’ve been wondering if such a thing would be possible using CSS3.

I’ve looked around the web, and have so far only found workarounds that are basically overlaying an image over text (see this, which isn’t a viable option for me). Apart from actually having a background image for text, is it possible to have a background gradient?

Answer 1

CSS3 adds the background-clip property. You can actually do this using -webkit-background-clip: text but the text value is proprietary and currently only implemented in Webkit based browsers (Safari and Chrome).

h1 {
  font-size: 3em;
  background: url('someimage.png');
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

A few articles that use -webkit-background-clip: text;:

• Gradient Text
• Animated background clip text
• Fun with -webkit-background-clip and @font-face