Template:Rainbow text/styles.css
Jump to navigation
Jump to search
.rainbow-container {
display: inline-block;
background: linear-gradient(90deg, hsl(0, 100%, 50%), hsl(30, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(240, 100%, 50%), hsl(275, 100%, 50%), hsl(300, 100%, 50%));
}
.rainbow-text {
color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}
.rainbow-text a {
background: inherit;
color: inherit;
background-size: 50% 100%;
animation: rainbow-link 1s linear infinite;
}
.rainbow-background {
color: #fff;
text-shadow: 1px 1px 1px #111;
border-radius: 3px;
}
.rainbow-background a {
color: rgba(255,255,255,0.75) !important;
}
@keyframes rainbow-link {
0% { background-position: 0% 0%; }
100% { background-position: 100% 0%; }
}