Neon Glow - 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>Neon Glow</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; color: #fff; font-family: 'Courier New', monospace; } .neon-glow-box { width: 300px; height: 200px; overflow-y: auto; padding: 20px; background: #111; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 255, 255, 0.5); } .neon-glow-box p { margin: 0; } .neon-glow-box::-webkit-scrollbar { width: 12px; } .neon-glow-box::-webkit-scrollbar-track { background: #333; border-radius: 10px; } .neon-glow-box::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00ffff, #0000ff); border-radius: 10px; box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; } .neon-glow-box::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #0000ff, #00ffff); box-shadow: 0 0 15px #00ffff, 0 0 25px #00ffff; } </style> </head> <body> <div class="neon-glow-box"> <p>Sample text for the Neon Glow design. Add more text to make the scrollbar visible and usable.</p> <p>Sample text for the Neon Glow design. Add more text to make the scrollbar visible and usable.</p> <p>Sample text for the Neon Glow design. Add more text to make the scrollbar visible and usable.</p> </div> </body> </html>