3D glass folder animation

jitesh208
Jan 17, 2026 2
Live Preview

Live Editor

<div class="stage">
  <div class="spotify-folder">

    <div class="folder-lid"></div>

    <div class="folder-body">
      <div class="album a1"></div>
      <div class="album a2"></div>
      <div class="album a3"></div>

      <div class="play">
        ▶
      </div>

      <div class="brand">spotify</div>
    </div>

  </div>
</div>
*{box-sizing:border-box}

body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at top,#1ed76044,#020403 60%);
  font-family:system-ui;
  overflow:hidden;
}

/* Scene */
.stage{
  perspective:1200px;
}

/* Folder */
.spotify-folder{
  width:260px;
  height:190px;
  position:relative;
  transform-style:preserve-3d;
  transition:.9s cubic-bezier(.16,1,.3,1);
}

/* Lid */
.folder-lid{
  position:absolute;
  top:-14px;
  width:100%;
  height:90px;
  border-radius:24px 24px 18px 18px;
  background:rgba(30,215,96,.18);
  backdrop-filter:blur(18px);
  transform-origin:bottom center;
  transition:.9s cubic-bezier(.16,1,.3,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 20px 40px rgba(30,215,96,.25);
}

/* Body */
.folder-body{
  position:absolute;
  bottom:0;
  width:100%;
  height:150px;
  border-radius:24px;
  background:rgba(30,215,96,.16);
  backdrop-filter:blur(20px);
  box-shadow:
    0 40px 80px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.4);
  overflow:hidden;
}

/* Albums */
.album{
  position:absolute;
  bottom:18px;
  left:18px;
  width:224px;
  height:110px;
  border-radius:16px;
  background:linear-gradient(135deg,#111,#1ed760);
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  transform:translateY(60px) scale(.9);
  opacity:0;
  transition:.8s cubic-bezier(.16,1,.3,1);
}

.a1{background:linear-gradient(135deg,#1ed760,#0b3)}
.a2{
  background:linear-gradient(135deg,#0f2027,#1ed760);
  transition-delay:.1s;
}
.a3{
  background:linear-gradient(135deg,#000,#1ed760);
  transition-delay:.18s;
}

/* Play button */
.play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:46px;
  color:white;
  text-shadow:0 10px 30px rgba(0,0,0,.6);
}

/* Branding */
.brand{
  position:absolute;
  bottom:12px;
  left:16px;
  font-size:14px;
  letter-spacing:.5px;
  color:white;
  opacity:.85;
}

/* Hover animation */
.spotify-folder:hover{
  transform:
    rotateX(12deg)
    rotateY(-16deg)
    translateY(-12px);
}

.spotify-folder:hover .folder-lid{
  transform:rotateX(-75deg) translateZ(20px);
}

.spotify-folder:hover .album{
  transform:translateY(0) scale(1);
  opacity:1;
}
Categories

3D glass folder animation

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
