Electric Pulse - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Electric Pulse</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); body { background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; font-family: 'Montserrat', sans-serif; color: #fff; } .container { text-align: center; position: relative; z-index: 1; } .knockout-text { font-size: 4em; font-weight: 800; position: relative; display: inline-block; margin: 0; background: linear-gradient(to right, #00c6ff, #0072ff); -webkit-background-clip: text; color: transparent; } .knockout-text::before { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { text-shadow: 0 0 10px #fff, 0 0 20px #00f260, 0 0 30px #00f260, 0 0 40px #00f260, 0 0 50px #00f260, 0 0 60px #00f260, 0 0 70px #00f260; } 50% { text-shadow: 0 0 20px #fff, 0 0 30px #00f260, 0 0 40px #00f260, 0 0 50px #00f260, 0 0 60px #00f260, 0 0 70px #00f260, 0 0 80px #00f260; } } </style> </head> <body> <div class="container"> <h1 class="knockout-text" data-text="Electric Pulse"> Electric Pulse </h1> </div> </body> </html>