Skip to content

Instantly share code, notes, and snippets.

@micahstubbs

micahstubbs/.block

Last active September 23, 2018 05:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save micahstubbs/7c846633ea98abf43212e25b2c6fc7ca to your computer and use it in GitHub Desktop.
Save micahstubbs/7c846633ea98abf43212e25b2c6fc7ca to your computer and use it in GitHub Desktop.
Download ZIP
CSS gradient rainbow text
Raw
.block
border: no
height: 76
license: Apache-2.0
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.rainbow {
background-image: gradient(linear, left top, right top,
color-stop(0, red),
color-stop(0.15, orange),
color-stop(0.3, yellow),
color-stop(0.45, green),
color-stop(0.65, blue),
color-stop(0.8, indigo),
color-stop(1, violet)
);
color:transparent;
background-clip: text;
/* for webkit browsers Chrome and Safari */
background-image: -webkit-gradient(linear, left top, right top,
color-stop(0, red),
color-stop(0.15, orange),
color-stop(0.3, yellow),
color-stop(0.45, green),
color-stop(0.65, blue),
color-stop(0.8, indigo),
color-stop(1, violet)
);
-webkit-background-clip: text;
}
.text {
font-size: 57px;
}
</style>
</head>
<body>
<script>
function rainbow(string) {
const span = document.createElement('span')
span.classList.add('rainbow', 'text')
span.innerHTML = string
return span
}
document
.getElementsByTagName('body')[0]
.appendChild(rainbow('rainbow text created with a CSS gradient'))
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment