Skip to content

Instantly share code, notes, and snippets.

@FirefighterBlu3

FirefighterBlu3/CSS animated linear gradient text

Last active March 10, 2017 01:57
Show Gist options
  • Save FirefighterBlu3/d946ea70fc9b2feb748980a03ee523c2 to your computer and use it in GitHub Desktop.
Save FirefighterBlu3/d946ea70fc9b2feb748980a03ee523c2 to your computer and use it in GitHub Desktop.
Download ZIP
Animated linear gradient background of text using only CSS
Raw
CSS animated linear gradient text
<html>
<head>
<style>
.dbox {
border: 1px solid black;
width: 10cm;
text-align: center;
padding:3em;
margin: auto;
}
.twiggle {
font-size:4em;
padding-right:.3em;
letter-spacing:-.3em;
background-image: linear-gradient(90deg, #000 50%, #fff 55%, #468 60%);
background-size: 300% 100%;
animation: Anim 20s ease infinite;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-shadow: 0px 0px .3em rgba(0,100,250,0.9);
}
@keyframes Anim {
0%{background-position:0% 0%}
30%{background-position:0% 0%}
50%{background-position:99% 0%}
70%{background-position:0% 0%}
100%{background-position:0% 0%}
}
</style>
</head>
<body>
<div class="dbox">
<p>Some text triangles <span class="twiggle">&#9664;&#9664;&#9664;</span> that
should have a 20s animated gradient (in Chrome). Animation will start at 6
seconds. This is all text with some simple CSS.</p>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment