Neonlight Textarea - 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>NeonLight TextArea</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(to right, #00c9ff, #92fe9d); font-family: 'Arial', sans-serif; margin: 0; } .container { position: relative; width: 100%; max-width: 600px; padding: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 20px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); text-align: center; } .container h1 { color: #fff; margin-bottom: 20px; } .textarea-container { position: relative; } .textarea-container textarea { width: 90%; padding: 20px; background: rgba(0, 0, 0, 0.2); border: none; border-radius: 10px; color: #00ffcb; font-size: 16px; resize: none; height: 150px; transition: all 0.3s ease; text-shadow: 0 0 8px rgba(0, 255, 203, 0.8); box-shadow: inset 0 0 10px rgba(0, 255, 203, 0.6); } .textarea-container textarea:focus { outline: none; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 15px rgba(0, 255, 203, 1); } .textarea-container .icon { position: absolute; top: 20px; right: 30px; font-size: 20px; color: #00ffcb; cursor: pointer; transition: transform 0.3s ease; text-shadow: 0 0 8px rgba(0, 255, 203, 0.8); } .textarea-container .icon:hover { transform: scale(1.2); } @keyframes neonFadeIn { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .textarea-container { animation: neonFadeIn 1s ease; } </style> </head> <body> <div class="container"> <h1>NeonLight TextArea</h1> <div class="textarea-container"> <textarea placeholder="Type your message here..."></textarea> <i class="fas fa-lightbulb icon"></i> </div> </div> <script> const icon = document.querySelector('.icon'); const textarea = document.querySelector('textarea'); icon.addEventListener('click', () => { textarea.focus(); }); </script> </body> </html>