Gradient Iframe - 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>Gradient Iframe</title> <style> body { font-family: 'Verdana', sans-serif; background: linear-gradient(45deg, #ff6b6b, #f7d794); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .iframe-container-gradient { width: 70%; height: 70%; position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); border-radius: 15px; overflow: hidden; background: #fff; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .iframe-container-gradient:hover { transform: scale(1.05); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } .iframe-header-gradient { position: absolute; top: 0; width: 100%; height: 40px; background: linear-gradient(45deg, #ff6b6b, #f7d794); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 18px; } .iframe-header-gradient .title { display: flex; align-items: center; } .iframe-header-gradient .title span { margin-right: 10px; } .iframe-header-gradient .icons { display: flex; align-items: center; } .iframe-header-gradient .icons i { margin: 0 5px; cursor: pointer; transition: color 0.3s; } .iframe-header-gradient .icons i:hover { color: #ff4081; } .iframe-content-gradient { width: 100%; height: calc(100% - 40px); } .iframe-container-gradient iframe { width: 100%; height: 100%; border: none; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .iframe-header-gradient .icons .emoji { margin-right: 20px; animation: rotate 4s linear infinite; } </style> </head> <body> <div class="iframe-container-gradient"> <div class="iframe-header-gradient"> <div class="title"> <span>🎨</span> <span>Gradient Iframe</span> </div> <div class="icons"> <i class="fas fa-expand"></i> <i class="fas fa-sync"></i> <i class="fas fa-times"></i> <span class="emoji">🌈</span> </div> </div> <div class="iframe-content-gradient"> <iframe src="https://example.com" title="Iframe"></iframe> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.querySelector('.fa-expand').addEventListener('click', function() { const iframeContainer = document.querySelector('.iframe-container-gradient'); iframeContainer.style.position = 'fixed'; iframeContainer.style.top = '0'; iframeContainer.style.left = '0'; iframeContainer.style.width = '100%'; iframeContainer.style.height = '100%'; iframeContainer.style.zIndex = '1000'; }); document.querySelector('.fa-sync').addEventListener('click', function() { document.querySelector('.iframe-content-gradient iframe').contentWindow.location.reload(); }); document.querySelector('.fa-times').addEventListener('click', function() { document.querySelector('.iframe-container-gradient').style.display = 'none'; }); </script> </body> </html>