About this snippet

Showcase your music using this advanced neumorphic audio player. We crafted complex soft shadows and a spinning record, which makes it incredibly realistic.

Size
4.5 KB
Uses
HTML, CSS, JavaScript
Loads
placehold.co
Views
172

Collections

Related snippets

<div class="player-body">
  <div class="neumorphic-player">
    <div class="vinyl-container">
      <img src="https://placehold.co/200x200/ec4899/ffffff?text=Vinyl" alt="Album Art" id="vinyl-record" class="vinyl-record">
      <div class="vinyl-center"></div>
    </div>
    
    <div class="song-info">
      <h2>Midnight Synth</h2>
      <p>Electronic Dreams</p>
    </div>
    
    <div class="controls">
      <button class="neu-btn small-btn">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><polygon points="19 20 9 12 19 4 19 20"></polygon><line x1="5" y1="19" x2="5" y2="5"></line></svg>
      </button>
      
      <button class="neu-btn play-btn" id="play-pause">
        <svg id="icon-play" viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
        <svg id="icon-pause" viewBox="0 0 24 24" width="28" height="28" fill="currentColor" style="display: none;"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
      </button>
      
      <button class="neu-btn small-btn">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
      </button>
    </div>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #e0e5ec;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.player-body {
  width: 100%;
  display: flex;
  justify-content: center;
}

.neumorphic-player {
  background: #e0e5ec;
  width: 100%;
  max-width: 380px;
  padding: 40px;
  border-radius: 30px;
  box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.7), -12px -12px 24px rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vinyl-container {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.6), -8px -8px 16px rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-bottom: 30px;
  background: #e0e5ec;
}

.vinyl-record {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  animation: spin 4s linear infinite;
  animation-play-state: paused;
  border: 4px solid #111827;
}

.vinyl-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background: #e0e5ec;
  border-radius: 50%;
  box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.5);
  border: 2px solid #9ca3af;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.song-info {
  text-align: center;
  margin-bottom: 30px;
}

.song-info h2 {
  margin: 0 0 6px 0;
  color: #374151;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
}

.song-info p {
  margin: 0;
  color: #9ca3af;
  font-weight: 500;
  font-size: 1rem;
}

.controls {
  display: flex;
  align-items: center;
  gap: 24px;
}

.neu-btn {
  background: #e0e5ec;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #6b7280;
  cursor: pointer;
  box-shadow: 6px 6px 12px rgba(163, 177, 198, 0.6), -6px -6px 12px rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.neu-btn:active {
  box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.6);
  color: #3b82f6;
}

.small-btn {
  width: 60px;
  height: 60px;
}

.play-btn {
  width: 80px;
  height: 80px;
  color: #3b82f6;
}

.play-btn.playing {
  box-shadow: inset 6px 6px 12px rgba(163, 177, 198, 0.6), inset -6px -6px 12px rgba(255, 255, 255, 0.6);
}
const playBtn = document.getElementById("play-pause");
const iconPlay = document.getElementById("icon-play");
const iconPause = document.getElementById("icon-pause");
const vinyl = document.getElementById("vinyl-record");

let isPlaying = false;

playBtn.addEventListener("click", function() {
  isPlaying = !isPlaying;
  
  if (isPlaying) {
    playBtn.classList.add("playing");
    iconPlay.style.display = "none";
    iconPause.style.display = "block";
    vinyl.style.animationPlayState = "running";
  } else {
    playBtn.classList.remove("playing");
    iconPlay.style.display = "block";
    iconPause.style.display = "none";
    vinyl.style.animationPlayState = "paused";
  }
});
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source





  
Keyboard shortcuts

  




  

    
Save