Neon Frame - VexaX
Run Code
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>Neon Frame</title> <style> body { margin: 0; font-family: 'Arial', sans-serif; background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; } .neon-frame { width: 400px; padding: 30px; border-radius: 10px; background: #111; color: #fff; position: relative; text-align: center; box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); } .neon-frame::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: linear-gradient(45deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2)); animation: neon-border 2s linear infinite; z-index: -1; } @keyframes neon-border { 0% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); } 50% { box-shadow: 0 0 20px rgba(255, 0, 255, 0.5); } 100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); } } .neon-frame h1 { margin: 0; font-size: 2em; } .neon-frame p { margin: 10px 0; } .neon-frame .icon { font-size: 2em; margin: 10px; color: #0ff; } .neon-frame .emoji { font-size: 3em; margin: 10px; } @keyframes neon-pulse { 0%, 100% { color: #0ff; } 50% { color: #f0f; } } .icon-neon { animation: neon-pulse 1.5s infinite; } .emoji-neon { animation: neon-pulse 1.5s infinite; } button { margin-top: 20px; padding: 10px 20px; font-size: 1em; color: #000; background-color: #0ff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #f0f; } </style> </head> <body> <div class="neon-frame"> <div class="icon icon-neon">🌐</div> <h1>Neon Frame</h1> <p>This container has a striking neon effect.</p> <div class="emoji emoji-neon">⚡</div> <button type="button">Shine Bright</button> </div> </body> </html>