

No HF Test
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.glassmorphic {
position: relative;
width: 500px;
height: 500px;
background-color: transparent;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
}
.glassmorphic::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.04) 100%
);
}
.glassmorphic:hover {
transform: rotate(2deg);
}
</style>
</head>
<body>
<div class="glassmorphic"></div>
</body>
</html>
