WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Text Color Animation
7251
darkcoder
Publish Your Code
Recommended
30 August 2024
Scroll Driven Animations Scroll Detection
29 September 2025
CSS Loading Animation with Background Image
8 February 2025
Dark Mode Switch CSS
index.html
Copy
Webleb
Color Changing Title
styles.css
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"); :root { --bg: #000000; --clr-1: #00c2ff; --clr-2: #be33ff; --clr-3: #40d9ff; --clr-4: #76ff4c; --blur: 1rem; --fs: clamp(2rem, 8vw, 5rem); --ls: clamp(-1.75px, -0.25vw, -3.5px); } body { background-color: var(--bg); color: #fff; font-family: "Inter", "DM Sans", Arial, sans-serif; } *, *::before, *::after { font-family: inherit; box-sizing: border-box; } .content { text-align: center; } .title { font-size: var(--fs); font-weight: 800; letter-spacing: var(--ls); position: relative; overflow: hidden; background: var(--bg); margin: 0; } .aurora { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; mix-blend-mode: darken; pointer-events: none; } .clr { overflow: hidden; position: absolute; width: 60vw; height: 60vw; background-color: var(--clr-1); border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; filter: blur(var(--blur)); mix-blend-mode: overlay; } .clr:nth-of-type(1) { top: -50%; animation: aurora-border 6s ease-in-out infinite, aurora-1 12s ease-in-out infinite alternate; } .clr:nth-of-type(2) { background-color: var(--clr-3); right: 0; top: 0; animation: aurora-border 6s ease-in-out infinite, aurora-2 12s ease-in-out infinite alternate; } .clr:nth-of-type(3) { background-color: var(--clr-2); left: 0; bottom: 0; animation: aurora-border 6s ease-in-out infinite, aurora-3 8s ease-in-out infinite alternate; } .clr:nth-of-type(4) { background-color: var(--clr-4); right: 0; bottom: -50%; animation: aurora-border 6s ease-in-out infinite, aurora-4 24s ease-in-out infinite alternate; } @keyframes aurora-1 { 0% { top: 0; right: 0; } 50% { top: 100%; right: 75%; } 75% { top: 100%; right: 25%; } 100% { top: 0; right: 0; } } @keyframes aurora-2 { 0% { top: -50%; left: 0%; } 60% { top: 100%; left: 75%; } 85% { top: 100%; left: 25%; } 100% { top: -50%; left: 0%; } } @keyframes aurora-3 { 0% { bottom: 0; left: 0; } 40% { bottom: 100%; left: 75%; } 65% { bottom: 40%; left: 50%; } 100% { bottom: 0; left: 0; } } @keyframes aurora-4 { 0% { bottom: -50%; right: 0; } 50% { bottom: 0%; right: 40%; } 90% { bottom: 50%; right: 25%; } 100% { bottom: -50%; right: 0; } } @keyframes aurora-border { 0% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; } 25% { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; } 50% { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; } 75% { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; } 100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; } }
main.js
Copy
// Nothing To Copy