Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .backdrop { background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") center; background-size: contain; margin: auto; margin-top: 50px; width: 600px; } .text { font: bolder 16vw "Alfa Slab One"; text-align: center; margin: 0; border: 6px solid; animation: glow 3s infinite; } @keyframes glow { 0% { text-shadow: 0 0 10px white; } 15% { text-shadow: 2px 2px 10px rgba(255, 255, 255, 1), -2px -2px 10px rgba(255, 255, 255, 1); } 30% { text-shadow: 2px 2px 4px rgba(255, 255, 255, .7), -2px -2px 4px rgba(255, 255, 255, .7); } 50% { text-shadow: 20px 20px 50px rgba(255, 255, 255, .5), -20px -20px 50px rgba(255, 255, 255, .5); } } .darken { color: white; mix-blend-mode: darken; background-color: rgba(59, 2, 6, 1); } </style> </head> <body> <div class="backdrop"> <p class="text darken">NATURE</p> </div> </body> </html>