cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

As Ana Tudor discovered, the CSS prefix helper libraries used by CodePen don't fix background-clip: text.

Edge supports both versions. WebKit and Blink only support the -webkit- version. Firefox supports both versions, but only as a single value, not part of a background stack.

In short: for compatibility, you still need to use -webkit-background-clip: text.

(And in production, either use an @supports test, or use -webkit-text-fill to make the text transparent, so it only turns transparent in browsers that support the extended -webkit- text options.)


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.