Luxury Neon Modal - 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>Luxury Neon Modal</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> body { font-family: 'Arial', sans-serif; background: linear-gradient(to top left, #ff6b6b, #f06595); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; } .modal { background: rgba(255, 255, 255, 0.2); border-radius: 30px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); width: 75%; max-width: 600px; padding: 35px; position: relative; animation: slideIn 0.5s ease; } .modal-header { display: flex; justify-content: space-between; align-items: center; } .modal-title { font-size: 1.8rem; color: #fff; } .modal-close { background: none; border: none; font-size: 2rem; color: #fff; cursor: pointer; transition: color 0.3s ease; } .modal-close:hover { color: #ffdf5c; } .modal-body { margin-top: 20px; font-size: 1.2rem; color: #ddd; } .modal-footer { display: flex; justify-content: flex-end; margin-top: 20px; } .modal-button { background: linear-gradient(to right, #ffdf5c, #ff6b6b); border: none; color: #fff; padding: 15px 30px; border-radius: 8px; font-size: 1.2rem; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .modal-button:hover { background: linear-gradient(to right, #ff6b6b, #ffdf5c); transform: scale(1.1); } @keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body> <button id="openModalBtn" class="modal-button">Open Neon Modal</button> <div id="modalOverlay" class="modal-overlay"> <div class="modal"> <div class="modal-header"> <h2 class="modal-title">Luxury Neon Modal</h2> <button id="closeModalBtn" class="modal-close"><i class="fas fa-times"></i></button> </div> <div class="modal-body"> <p>Welcome to the Luxury Neon Modal. This design incorporates a neon-like glow with a glassmorphism background and vibrant gradients for a luxurious look.</p> </div> <div class="modal-footer"> <button class="modal-button">Confirm</button> </div> </div> </div> <script> document.getElementById('openModalBtn').addEventListener('click', function() { document.getElementById('modalOverlay').style.display = 'flex'; }); document.getElementById('closeModalBtn').addEventListener('click', function() { document.getElementById('modalOverlay').style.display = 'none'; }); window.addEventListener('click', function(event) { if (event.target === document.getElementById('modalOverlay')) { document.getElementById('modalOverlay').style.display = 'none'; } }); </script> </body> </html>