Skip to content

Instantly share code, notes, and snippets.

@fribibb
Created November 4, 2018 23:44
Show Gist options
  • Save fribibb/c4be9af2b82a5e65aed626ab93e4e8d2 to your computer and use it in GitHub Desktop.
Save fribibb/c4be9af2b82a5e65aed626ab93e4e8d2 to your computer and use it in GitHub Desktop.
.bg-clip {
// Make it pretty ///////////////////
font-size: 30rem;
font-weight: 900;
text-transform: uppercase;
text-align: center;
// The clipping /////////////////////
// Fallback colour
color: #000;
// Otherwise, for clipping, make transparent
-webkit-text-fill-color: transparent;
// Background image/gradient/etc.
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 44%, #FFCC70 100%);
// Clip
-webkit-background-clip: text;
// 'Hide' bg image for all
background-size: 0;
// Show bg image for Webkit/Opera
-webkit-background-size: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment