Need help with background-clip-text-polyfill?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

132 Stars 29 Forks 9 Commits 2 Opened issues


A SVG polyfill for -webkit-background-clip: text

Services available


Need anything else?

Contributors list

# 122,369
9 commits

-webkit-background-clip: text polyfill

A SVG polyfill for

-webkit-brackground-clip: text


If you want to use

background-clip: text
it's only available in WebKit based browser
h1 {
  background: url( repeat;
  -webkit-background-clip: text;

This polyfill uses CSS feature detection and if

-webkit-background-clip: text
is not available, it replaces the specified dom element with a SVG like this:
  background-clip: text | Polyfill

How to use it?

1. Add the polyfill to your page:

2. Call the polyfill

Use it on any element, put keep in mind that the SVG

can't handle line breaks, so your content will be in one line.
var element = document.querySelector('.myelement'); 


  • Call the polyfill
  • patternID : the unique ID of the SVG pattern
  • patternURL : the URL to the background-image
  • class : the css-class applied to the SVG
  • / element.backgroundClipPolyfill({ 'patternID' : 'mypattern', 'patternURL' : 'url/to/background/pattern', 'class' : 'myelement' });

Live example

You can see this in action on my CodePen: -webkit-background-clip: text Polyfill.

Handcrafted 2013 by Tim Pietrusky in Germany.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.