Skip to content

Instantly share code, notes, and snippets.

Last active December 12, 2015 03:39
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
A CodePen by Rachel Nabors. Text Clipping Sass mixin - Based on Divya Manian's pure CSS background clipping solution. Now you can clip text to your heart's content without fear of disappearing text in non-webkit browsers!
/* The background clip for text mixin */
/* Based on Divya's pure CSS solution: */
@mixin clip-text($img-url, $color: #000) {
color: $color;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url($img-url) repeat;
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
/* The mixin in action... */
h1 {
@include clip-text("", #fff);
font-family: OstrichSansBlack;
font-size: 5em;
margin: 2em 0;
text-align: center;
/* Other Styles */
body { background: #444; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment