Created
February 20, 2015 15:32
-
-
Save jletourneau/81c36ad15e018f241600 to your computer and use it in GitHub Desktop.
CSS text background gradients
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>CSS text gradient</title> | |
<style type="text/css"> | |
h1 { | |
display: inline; | |
font: bold 72px 'Helvetica Neue', Helvetica, sans-serif; | |
line-height: 1; | |
background-image: -webkit-linear-gradient( | |
/* 0deg: left to right */ | |
/* 90deg: bottom to top */ | |
/* 180deg: right to left */ | |
/* 270deg: top to bottom */ | |
270deg, | |
blue 0%, | |
red 100% | |
); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Hello world</h1> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment