<style> @import url('https://fonts.googleapis.com/css?family=Teko&display=swap'); * { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Teko', sans-serif; background: #000; } a { text-decoration: none; color: inherit; font-size: 4vmin; } p { position: relative; text-align: center; font-size: 8vmin; text-transform: uppercase; letter-spacing: 5px; line-height: .8; background: linear-gradient(90deg, #000, #fff, #000); background-size: 80% 100%; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 5s linear infinite; } @keyframes shine { 0% { background-position-x: -500%; } 100% { background-position-x: 500%; } } </style> <p>Welcome to my codepen profile:<br><a href="https://codepen.io/cssparadise">codepen.io/cssparadise</a></p>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter