Skip to content

Instantly share code, notes, and snippets.

@mgrigajtis
Created January 20, 2017 04:43
Show Gist options
  • Save mgrigajtis/7b1a179afd8a1ee0f7819d0cce166e50 to your computer and use it in GitHub Desktop.
Save mgrigajtis/7b1a179afd8a1ee0f7819d0cce166e50 to your computer and use it in GitHub Desktop.
CSS3 backlight
div {
position: relative;
width: 30vw;
height: 30vw;
line-height: 30vw;
text-align: center;
color: #252B37;
background-color: #151823;
animation: textColor 10s ease infinite;
}
div:after {
position: absolute;
content: "";
top: 5vw;
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.75);
-webkit-filter: blur(5vw);
-moz-filter: blur(5vw);
-ms-filter: blur(5vw);
filter: blur(5vw);
background: linear-gradient(270deg, #0fffc1, #7e0fff);
background-size: 200% 200%;
animation: animateGlow 10s ease infinite;
}
@keyframes animateGlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes textColor {
0% {
color: #7e0fff;
}
50% {
color: #0fffc1;
}
100% {
color: #7e0fff;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment