<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Frosted Glass Effect with Falling Diamonds</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; height: 100vh; overflow: hidden; background: linear-gradient(135deg, #4a90e2, #9013fe); display: flex; align-items: center; justify-content: center; } .frosted-container { width: 300px; height: 200px; padding: 20px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; position: relative; border-radius: 15px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(15px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); z-index: 10; } .frosted-container h1 { font-size: 1.5rem; z-index: 11; } /* Diamond styling */ .diamond { position: absolute; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.8); transform: rotate(45deg); box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); animation: fall 5s linear infinite; } /* Falling animation */ @keyframes fall { 0% { top: -10px; left: calc(100vw * var(--x)); opacity: 1; } 100% { top: 100vh; left: calc(100vw * var(--x)); opacity: 0; } } /* Generate multiple diamonds */ .diamond:nth-child(1) { --x: 0.1; animation-duration: 4s; } .diamond:nth-child(2) { --x: 0.2; animation-duration: 6s; } .diamond:nth-child(3) { --x: 0.3; animation-duration: 5s; } .diamond:nth-child(4) { --x: 0.4; animation-duration: 4.5s; } .diamond:nth-child(5) { --x: 0.5; animation-duration: 6.5s; } .diamond:nth-child(6) { --x: 0.6; animation-duration: 4.8s; } .diamond:nth-child(7) { --x: 0.7; animation-duration: 5.2s; } .diamond:nth-child(8) { --x: 0.8; animation-duration: 6.1s; } .diamond:nth-child(9) { --x: 0.9; animation-duration: 5.9s; } </style> </head> <body> <div class="frosted-container"> <h1>Frosted Glass Effect</h1> </div> <!-- Falling diamonds --> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> </body> </html>
