Gradient animation color on Text by Fernand Samsa Output View Horizontal Vertical HTML CSS JS Tidy <div> <h1 data-val="Gradient animation color on Text">Gradient animation color on Text</h1> </div> HTML CSS JS Tidy @import url('https://fonts.googleapis.com/css2?family=Anton&family=Bungee+Spice&family=Tilt+Neon&display=swap'); body { margin: 0; min-height: 100vh; display: grid; place-content: center; font-family: "Bungee Spice", sans-serif; font-optical-sizing: auto; background-color: #eff9f8; } h1 { font-weight: 900; font-size: 4.5vw; position: relative; animation: texxt 30s linear alternate infinite; &:before, &:after { --tm: 2s; position: absolute; inset: 0; content: attr(data-val); color: transparent; opacity: 0; animation: show var(--tm) linear alternate infinite; } &:before { z-index: 1; background: linear-gradient(65deg, hsl(0, 100%, 70%), hsl(30, 100%, 70%), hsl(60, 100%, 70%), hsl(90, 100%, 70%), hsl(120, 100%, 70%), hsl(150, 100%, 70%), hsl(180, 100%, 70%), hsl(210, 100%, 70%), hsl(240, 100%, 70%), hsl(270, 100%, 70%), hsl(300, 100%, 70%), hsl(330, 100%, 70%), hsl(360, 100%, 70%)); background: linear-gradient(in hsl longer hue 65deg, #f66 0 0); background-clip: text; -webkit-background-clip: text; } &:after { animation-delay: calc(var(--tm) / 4); z-index: 2; background: linear-gradient(-65deg, hsl(0, 100%, 70%), hsl(30, 100%, 70%), hsl(60, 100%, 70%), hsl(90, 100%, 70%), hsl(120, 100%, 70%), hsl(150, 100%, 70%), hsl(180, 100%, 70%), hsl(210, 100%, 70%), hsl(240, 100%, 70%), hsl(270, 100%, 70%), hsl(300, 100%, 70%), hsl(330, 100%, 70%), hsl(360, 100%, 70%)); background: linear-gradient(in hsl longer hue -65deg, #f66 0 0); background-clip: text; -webkit-background-clip: text; } } @keyframes show { to { opacity: 1; } } @keyframes texxt { from { font-variation-settings: "wdth" 75; } to { font-variation-settings: "wdth" 150; } } HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Gradient animation color on Text in CSS, without using an external library. Catagory CSS Tags Animation Effect Resource Add External Stylesheets and Script
