Glassmorphism Section - 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>Glassmorphism Section</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> body { margin: 0; font-family: 'Arial', sans-serif; background: linear-gradient(to right, #8e2de2, #4a00e0); color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; } .section { width: 80%; max-width: 1200px; padding: 2rem; border-radius: 15px; background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; animation: slideIn 1s ease-out; } .section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); z-index: 0; animation: gradientShift 3s infinite alternate; } .section-content { position: relative; z-index: 1; text-align: center; } h1 { font-size: 2.5rem; margin-bottom: 1rem; animation: fadeIn 2s; } p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0; animation: fadeIn 2s 1s forwards; } .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 30px; background: linear-gradient(135deg, #ff8a00, #e52e71); color: #fff; font-size: 1rem; cursor: pointer; transition: transform 0.3s ease; position: relative; overflow: hidden; display: inline-block; } .btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: rgba(255, 255, 255, 0.2); transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease; border-radius: 50%; } .btn:hover::before { width: 0; height: 0; } .btn:hover { transform: scale(1.05); } .icon { font-size: 2rem; color: #fff; margin-top: 1rem; animation: bounce 2s infinite; } @keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes gradientShift { from { background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); } to { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } </style> </head> <body> <div class="section"> <div class="section-content"> <h1>Glassmorphism Section</h1> <p>Explore the stunning glassmorphism design with unique CSS effects, animations, and icons to make your section stand out.</p> <button class="btn">Learn More</button> <div class="icon"> <i class="fas fa-cogs"></i> </div> </div> </div> </body> </html>