15+ CSS Music Card Examples

This post contains a total of 15+ CSS Music Card Examples with Source Code. All these Music Cards are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Music Card Examples

1. Music Card Prototype

Made by Taj Rahman. CSS Music card with listen now button that appears on hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,300' rel='stylesheet' type='text/css'> 
<style>
body {
  font-family: "Roboto", sans-serif;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#card {
  position: relative;
  overflow: hidden;
  font-family: sans-serif;
  /* background-blend-mode: luminosity; */
  /* box-shadow: 0px 8px 20px rgba(black, 0); */
  box-shadow: 0px 0px 0px black;
  transition: all 0.3s ease-in-out;
  width: 650px;
  height: 315px;
}
#card .meta {
  /* margin-top: 215px; */
  /* margin-left: 40px; */
  position: absolute;
  bottom: 20px;
  left: 45px;
  transform: translateY(60%);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
#card .artist {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-bottom: 0;
}
#card .song {
  font-weight: 300;
  margin-top: 0;
  letter-spacing: 1px;
}
#card:hover {
  /* box-shadow: 0px 8px 20px rgba(black, 0.3); */
}
#card:hover .meta {
  transform: translateY(0%);
  opacity: 1;
}
#card:hover .button {
  transform: translateY(0%);
  opacity: 1;
}

.drake {
  color: white;
  background: #513D93 url("https://dl.dropbox.com/s/bhyk47vntgqbw9q/drake.png") no-repeat center;
  background-size: cover;
}

.button {
  position: absolute;
  right: 40px;
  bottom: 45px;
  padding: 15px 30px;
  font-size: 0.9em;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  background: linear-gradient(45deg, #00CDEA, #50E5A0);
  border-radius: 50px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0);
  transition: all 0.3s ease-in-out;
  transform: translateY(80%);
  opacity: 0;
}
.button:hover {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

#music-player {
  width: 650px;
  height: 0px;
  background: #00CDEA;
  transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
  <div class="container">
  <div id="card" class="drake">
    <div class="meta">
      <h3 class="artist">Drake</h3>
      <h1 class="song">Hotline Bling</h1>
    </div>
    
    <a href="#" class="button" id="btn" onclick="toggle('music-player');">Listen Now</a>
  </div>
  <div id="music-player">
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script id="rendered-js" >
function toggle(id) {
  var musicPlayer = document.getElementById(id);

  if (musicPlayer.style.height == '0px')
  musicPlayer.style.height = '80px';else

  musicPlayer.style.height = '0px';
}
    </script>
</body>
</html>

2. Apple Music Card

Made by Chris. Apple music cards without any animation or effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Apple Music Card</title> 
<style>
:root {
  --color-grey-900: #292624;
  --color-grey-700: #302D2C;
  --color-grey-500: #3A3737;
  
  --color-purple-700: #773FC3;
  --color-purple-500: #9C4DE6;
  
  --border-radius: 4px;
}

body {
  background-color: var(--color-grey-900);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 80px 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  border: 1px solid var(--color-grey-500);
  background-color: var(--color-grey-700);
  box-shadow: 2px 2px 42px rgba(0, 0, 0, .6);
  border-radius: calc(2 * var(--border-radius));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 8px;
  padding: 16px;
  width: 500px;
  height: 300px;
}

.card-item {
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius);
  box-shadow: 2px 2px 16px rgba(0, 0, 0, .3);
}

.card-item--large {
  grid-column: span 2;
  grid-row: span 2;
}

.card-item:nth-of-type(3) {
  grid-column: 3;
  grid-row: 2;
}

.title {
  background-image: linear-gradient(to top right, var(--color-purple-700), var(--color-purple-500));
  padding: 12px;
  
  display: flex;
  flex-direction: column;
}

.title-logo {
  color: rgba(255, 255, 255, .3);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .8em;
}

.title-logo svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.title-heading {
  font-weight: 300;
  margin: 0;
  margin-top: 16px;
  color: rgba(255, 255, 255, .6);
  font-size: 2em;
  line-height: 1;
}

.title-heading strong {
  font-weight: 700;
}

.title-updated {
  color: rgba(255, 255, 255, .5);
  font-size: .7em;
  margin-top: auto;
}
</style>
</head>
<body>
  <section class="card">
  <div class="title card-item card-item--large">
    <span class="title-logo">

      <svg
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xmlns:cc="http://creativecommons.org/ns#"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:svg="http://www.w3.org/2000/svg"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
         xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
         width="1000"
         viewBox="0 0 1000 1187.198"
         version="1.1"
         height="1187.198"
         id="svg2"
         inkscape:version="0.91 r13725"
         sodipodi:docname="Apple_1998.svg">
        <metadata
           id="metadata10">
          <rdf:RDF>
            <cc:Work
               rdf:about="">
              <dc:format>image/svg+xml</dc:format>
              <dc:type
                 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
              <dc:title></dc:title>
            </cc:Work>
          </rdf:RDF>
        </metadata>
        <defs
           id="defs8" />
        <sodipodi:namedview
           pagecolor="#ffffff"
           bordercolor="#666666"
           borderopacity="1"
           objecttolerance="10"
           gridtolerance="10"
           guidetolerance="10"
           inkscape:pageopacity="0"
           inkscape:pageshadow="2"
           inkscape:window-width="1366"
           inkscape:window-height="705"
           id="namedview6"
           showgrid="false"
           inkscape:zoom="0.1767767"
           inkscape:cx="-1066.5045"
           inkscape:cy="964.94669"
           inkscape:window-x="-8"
           inkscape:window-y="-8"
           inkscape:window-maximized="1"
           inkscape:current-layer="svg2" />
        <path
           d="m 979.04184,925.18785 c -17.95397,41.47737 -39.20563,79.65705 -63.82824,114.75895 -33.56298,47.8528 -61.04356,80.9761 -82.22194,99.3698 -32.83013,30.192 -68.00529,45.6544 -105.67203,46.5338 -27.04089,0 -59.6512,-7.6946 -97.61105,-23.3035 -38.08442,-15.5358 -73.08371,-23.2303 -105.08578,-23.2303 -33.56296,0 -69.55888,7.6945 -108.06101,23.2303 -38.5608,15.6089 -69.62484,23.7432 -93.37541,24.5493 -36.12049,1.5389 -72.1237,-14.3632 -108.06101,-47.7796 -22.93711,-20.0059 -51.62684,-54.3017 -85.99592,-102.8874 C 92.254176,984.54592 61.937588,924.38175 38.187028,855.7902 12.750995,781.70252 0,709.95986 0,640.50361 0,560.94181 17.191859,492.32094 51.626869,434.81688 78.689754,388.62753 114.69299,352.19192 159.75381,325.44413 c 45.06086,-26.74775 93.74914,-40.37812 146.18212,-41.25019 28.68971,0 66.3125,8.8744 113.06613,26.31542 46.62174,17.49964 76.55727,26.37404 89.68198,26.37404 9.8124,0 43.06758,-10.37669 99.4431,-31.06405 53.31237,-19.18512 98.30724,-27.12887 135.16787,-23.99975 99.8828,8.06098 174.92313,47.43518 224.82789,118.37174 -89.33023,54.12578 -133.51903,129.93556 -132.63966,227.18753 0.8061,75.75115 28.28668,138.78795 82.2952,188.8393 24.47603,23.23022 51.81008,41.18421 82.22186,53.93522 -6.59525,19.12648 -13.557,37.44688 -20.95846,55.03446 z M 749.96366,23.751237 c 0,59.37343 -21.69138,114.810233 -64.92748,166.121963 -52.17652,60.99961 -115.28658,96.24803 -183.72426,90.68597 -0.87204,-7.12298 -1.37769,-14.61967 -1.37769,-22.49743 0,-56.99843 24.81315,-117.99801 68.87738,-167.873453 21.99909,-25.25281 49.978,-46.25018 83.90738,-63.00018 C 686.57507,10.688027 718.59913,1.5631274 748.71783,5.2734376e-4 749.59727,7.9378274 749.96366,15.875627 749.96366,23.750467 Z"
           id="path4"
           inkscape:connector-curvature="0" />
      </svg>

      Music
    </span>
    <h1 class="title-heading"><strong>Favourites</strong> Mix</h1>
    <div class="title-updated">Updated Tuesday</div>
  </div>
  <div class="card-item" style="--image: url('https://unsplash.it/300?random=2')"></div>
  <div class="card-item" style="--image: url('https://unsplash.it/300?random=3')"></div>
  <div class="card-item card-item--large" style="--image: url('https://unsplash.it/300?random=4')"></div>
  <div class="card-item" style="--image: url('https://unsplash.it/300?random=5')"></div>
  <div class="card-item" style="--image: url('https://unsplash.it/300?random=6')"></div>
  <div class="card-item" style="--image: url('https://unsplash.it/300?random=7')"></div>
  <div class="card-item" style="--image: url('https://unsplash.it/300?random=8')"></div>
  <div class="card-item" style="--image: url('https://unsplash.it/300?random=9')"></div>
</section>
</body>
</html>

3. Music card with Hover Effect

Made by IMarty. Music card with cool hover effects, the controls and the song title appears on hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<style>
@import 'https://fonts.googleapis.com/css?family=Roboto';
h2 {
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  margin-top: 100px;
}

* {
  box-sizing: border-box;
  transition-duration: 0.6s;
}

body {
  font-family: "Roboto", cursive;
  background-color: #16a085;
}

h1, i {
  font-size: 2.3rem;
  color: #FFF;
  opacity: 0;
}

.card:hover h1, .card:hover i {
  opacity: 1;
  transform: translateY(10px);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card {
  overflow: hidden;
  background-color: #000;
}

i {
  margin-top: 50px;
  margin-left: 20px;
}

.card:hover i {
  transform: rotate(360deg);
}

.card:hover img {
  transform: scale(1.5) rotate(10deg);
}

.moare {
  color: #FFF;
  width: 400px;
  text-align: center;
}

.actions {
  text-align: center;
}

.card:hover img {
  opacity: 0.8;
}

.card:after {
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  content: "";
  opacity: 1;
  display: block;
  transition: all 0.35s ease-out;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform: scaleX(0) !important;
  -ms-transform: scaleX(0) !important;
  transform: scaleX(0) !important;
}

.card:hover:after {
  z-index: 1000;
  -webkit-transform: scaleX(1) !important;
  -ms-transform: scaleX(1) !important;
  transform: scaleX(1) !important;
}

.card:before {
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  content: "";
  opacity: 1;
  display: block;
  transition: all 0.35s ease-out;
  border-right: 3px solid #fff;
  border-left: 3px solid #fff;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleY(0) !important;
  -ms-transform: scaleY(0) !important;
  transform: scaleY(0) !important;
}

.card:hover:before {
  z-index: 1;
  -webkit-transform: scaleY(1) !important;
  -ms-transform: scaleY(1) !important;
  transform: scaleY(1) !important;
}
</style>
</head>
<body>
  <h2>hover this !</h2>
<div class="card center">
	<img src="http://phonosti.co/wp-content/uploads/2016/07/Sumac_Dub_Matsya_Cover-600x600.jpg" alt="" />
	<div class="moare center">
		<h1>SUMAC DUB <br />- <br />MATSYA</h1>
		<div class="actions">
		<i class="fa fa-play-circle fa-4x" aria-hidden="true"></i>
		<i class="fa fa-plus fa-4x" aria-hidden="true"></i>
		</div>
	</div>
</div>
</body>
</html>

4. Simple music card

Made by The Raven. Simple music card with hover effects on buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:[email protected]&family=Roboto+Slab&family=Titillium+Web&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<style>
* {
 margin: 0 0;
 padding: 0px;
  box-sizing: border-box;
}
.grid {
  width: 100vw;
  height: 100vh;
  background-color: #1F1D36;
 display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  height: 250px;
  width: 60%;
  background-color: #3F3351;
  display: flex;
  justify-items: center;
  align-items: center;
}
.card-img {
  width: 50%;
  height: auto;
  transform: translateX(-5rem);
  border: 6px solid #864879; 
  border-radius: 20px;
}
.card-content {
color: #E9A6A6;
  font-family: 'Titillium Web', sans-serif;
  hyphen: auto;
}
.card-footer {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}
.btn {
  border: none;
  background: none;
  font-size: 50px;
  color: #E9A6A6;
  transition: 0.2s;
}
.btn:hover {
  transform: translateY(-10%);
  box-shadow: 10px 10px -5px 15px black;}
</style>
</head>
<body translate="no" >
  <div class="grid">
  <div class="card">
    <img src="https://static.libsyn.com/p/assets/4/d/a/8/4da8e42893b345f7/166_-_Steven_Assael_-_2_LR.jpg" alt="" class="card-img" loading='lazy'>
<!--     <img src="https://cdn.pixabay.com/photo/2014/10/27/06/44/record-504759_1280.png" alt="" class="card-img"> -->
    <div class="card-content">
      <h1 class="card-title">Beautiful People</h1>
      <p class="card-description">feat: Ed Sheeran</p>
    <div class="card-footer">
      <button class="btn">
        <i class="fas fa-angle-left"></i>
      </button>  
      <button class="btn main"><i class="fas fa-caret-circle-right"></i></button>
      <button class="btn">
      <i class="fas fa-angle-right"></i></button>
    </div>
    </div>
  </div>
</div>
</body>
</html>

5. Basic music card

Made by Toprak. Just a basic music card with no effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.card{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    width: 348px;
    height: 450px;
    background-color: #1DB954;
    border-radius: 15px;
    box-shadow: 4px 5px 20px 1px rgba(0, 0, 0, 0.25);
}

.card-up{
    width: 348px;
    height: 259px;
    background-image: url(https://pinkfloydturk.files.wordpress.com/2012/12/2pink-floyd-dark-side-of-the-moon.jpg);
    border-radius: 15px 15px 0px 0px;
}

.card-down{
    width: 348px;
    height: 160px;
    background-color:#1DB954;
    border-radius: 0px 0px 15px 15px;
    color: #fff;
    font-family: sans-serif;
}



h3{
    margin-top: 31px;
    margin-left: 33px;
    font-weight: bold;
    font-size: 25px;

}

p{
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: lighter;
}
.card-down-icon{
    margin-top:25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
   
}

.card-down-icon svg + svg{
margin-left: 30px;
}

.circle{
    width: 70px;
    height: 70px;
    border-radius: 100px;
    background-color: #fff;
    margin-left: 10px;
    margin-right: 10px;
}
.circle-button{
    margin-left: 9px;
    margin-top: 8px;

}
</style>
</head>
<body>
  <div class="card">
     <div class="card-up">

     </div>
     <div class="card-down">
        <h3>AcΔ±nΔ±n Δ°lacΔ±</p>
        <p>Adamlar</p>
        <div class="card-down-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 22L3 18L7 14V17H17V13H19V18C19 18.5523 18.5523 19 18 19H7V22ZM7 11H5V6C5 5.44772 5.44772 5 6 5H17V2L21 6L17 10V7H7V11Z" fill="#fff"/>
</svg>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 18L11.5 12L20 6V18ZM11 18L2.5 12L11 6V18Z" fill="#fff"/>
</svg>


            <div class="circle">
             <svg class="circle-button" width="54" height="54" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 19L19 12L8 5V19Z" fill="#2E3A59"/>
</svg>

            </div>

            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 18V6L21.5 12L13 18ZM4 18V6L12.5 12L4 18Z" fill="#fff"/>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 20H14.5L16.549 17.95L13.42 14.82L14.83 13.41L17.96 16.539L20 14.5V20ZM5.41 20L4 18.59L16.54 6.04L14.5 4H20V9.5L17.96 7.46L5.411 20H5.41ZM9.17 10.58L4 5.41L5.41 4L10.59 9.17L9.17 10.579V10.58Z" fill="#fff"/>
</svg>
        </div>
        </div>
     </div>
    </div>
</body>
</html>

6. Amazing Music Card Using HTML & CSS

Made by Nikhil. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"
    /> 
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient( circle 602px at 2.1% 5.1%, rgba(233, 0, 120, 1) 0%, rgba(0, 0, 0, 1) 90.1%);
}

.card {
    height: 200px;
    width: 400px;
    display: flex;
    border-radius: 5px;
}

.card img {
    height: 100px;
    margin: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.4);
}

.card .content {
    color: #ffffff;
}

.controlls {
    margin: 10px 0;
}

.controlls a {
    text-decoration: none;
    margin: 0 10px;
}

.controlls .fa {
    color: #ffffff;
    height: 60px;
}
</style>
</head>
<body>
  <div class="card">
        <div class="image">
            <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fimge.kugou.com%2Fstdmusic%2F20150718%2F20150718170411961983.jpg&f=1&nofb=1" alt="">
        </div>
        <div class="content">
            <h1>Dark paradise</h1>
            <p>Lana dey ray</p>
            <div class="controlls">
                <a href=""><i class="fa fa-backward" aria-hidden="true"></i>
                </a>
                <a href=""><i class="fa fa-pause" aria-hidden="true"></i>
              </a>
                <a href=""><i class="fa fa-forward" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
</body>
</html>

7. Anomaly Music card

Made by Dronca Raul. Music card with flowing wave animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
  
<style>
@import 'https://fonts.googleapis.com/css?family=Reem+Kufi';

body {
  background: #fff;
}


@-webkit-keyframes wave {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


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

.music-card {
  margin: 100px auto;
  background: #fff;
  box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
  overflow: hidden;
  position: relative;
  width: 300px;
  height: 500px;
  border-radius: 6px;
}

.image {
  background: url('http://static1.squarespace.com/static/530b728de4b04fc9b23a5988/t/569880381a5203aa7d44c1a8/1452834873397/00.jpg?format=1000w') no-repeat 75%;
  background-size: cover;  
  position: absolute;
  z-index: 1;
  opacity: 0.3;
  height: 300px;
  width: 300px;
}

.image:after {
  height: 100px;
  content: '';
  top: 200px;
  position: absolute;
  width: 100%;
  z-index: 1;
  background: linear-gradient(rgba(9, 2, 4, 0), #444);
}

.wave {
  position: absolute;
  height: 750px;
  width: 750px;
  opacity: 0.6;
  left: 0;
  top: 0;
  margin-left: -70%;
  margin-top: -130%;
  background: radial-gradient(#353535, #383737);
}

.wave:nth-child(2),
.wave:nth-child(3) {
  top: 10px;
}

.playing .wave {
  border-radius: 40%;
  -webkit-animation: wave 3000ms infinite linear;
          animation: wave 3000ms infinite linear;
}
/* when stop */
.wave {
  border-radius: 40%;
  -webkit-animation: wave 55s infinite linear;
          animation: wave 55s infinite linear;
}

.playing .wave:nth-child(2) {
  -webkit-animation-duration: 4000ms;
          animation-duration: 4000ms;
}
/* when stop */
.wave:nth-child(2) {
  -webkit-animation-duration: 50s;
          animation-duration: 50s;
}

.playing .wave:nth-child(3) {
  -webkit-animation-duration: 5000ms;
          animation-duration: 5000ms;
}
/* when stop */
.wave:nth-child(3) {
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
}

.info {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
}

.title {
  font-size: 1.4em;
  font-weight: 400;
  color: #333;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-family: 'Reem Kufi', sans-serif;
}

.artist {
  color: #cfcfcf;
  font-size: 1.2em;
  letter-spacing: 0.08em;
  font-family: 'Reem Kufi', sans-serif;
  margin-top: -10px;
}

.fa {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 18px;
  cursor: pointer;
  color: #555;
}

.fa-play {
  display: none;
}
</style>
</head>
<body>
  <div class='music-card playing'>
  
  <div class='image'></div>
  
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  
  <div class='info'>
    <h2 class='title'>Anomaly</h2>
    <div class='artist'>Lecrae</div>
  </div>
  
  <i class="fa fa-pause trigger" aria-hidden="true"></i>
  <i class="fa fa-play trigger" aria-hidden="true"></i>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script id="rendered-js" >
var audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/Lecrae_-_Anomaly_(Lyric_Video).mp3');
audio.volume = 0.1;
audio.autoplay = true;

$('.trigger').click(function () {
  if (audio.paused == false) {
    audio.pause();
    $('.fa-play').show();
    $('.fa-pause').hide();
    $('.music-card').removeClass('playing');
  } else {
    audio.play();
    $('.fa-pause').show();
    $('.fa-play').hide();
    $('.music-card').addClass('playing');
  }
});
    </script>
</body>
</html>

8. Music card with flow animation

Made by Samantha Rose Cruz. Another music card with flow animation and gradient effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Playfair+Display|Source+Sans+Pro' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Playfair+Display|Source+Sans+Pro'>
  
<style>
@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
body {
  background: #fafafa;
}

.music-card {
  margin: 100px auto;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: relative;
  width: 300px;
  height: 500px;
}
.music-card > .image img {
  position: absolute;
  z-index: 1;
  opacity: 0.3;
  height: 300px;
  width: 300px;
}
.music-card > .image:after {
  height: 100px;
  content: "";
  top: 200px;
  position: absolute;
  width: 100%;
  z-index: 1;
  background: linear-gradient(rgba(221, 65, 127, 0), #DD417F);
}
.music-card > .wave {
  position: absolute;
  height: 750px;
  width: 750px;
  opacity: 0.6;
  left: 0;
  top: 0;
  margin-left: -70%;
  margin-top: -130%;
  border-radius: 40%;
  background: radial-gradient(#B01DE8, #F34235);
  -webkit-animation: spin 3000ms infinite linear;
          animation: spin 3000ms infinite linear;
}
.music-card > .wave:nth-child(2) {
  top: 10px;
  -webkit-animation: spin 4000ms infinite linear;
          animation: spin 4000ms infinite linear;
}
.music-card > .wave:nth-child(3) {
  top: 10px;
  -webkit-animation: spin 5000ms infinite linear;
          animation: spin 5000ms infinite linear;
}
.music-card > .info {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  text-align: center;
}
.music-card > .info > .title {
  font-size: 1.3em;
  font-weight: 400;
  font-family: "Playfair display";
  color: #333;
  margin-bottom: 8px;
}
.music-card > .info > .artist {
  font-family: "Source sans pro";
  color: #cfcfcf;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
</style>
</head>
<body>
  <div class='music-card'>
  <div class='image'>
    <img src='https://images-na.ssl-images-amazon.com/images/I/513VUhBNJzL.jpg'>
  </div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='wave'></div>
  <div class='info'>
    <h2 class='title'>Blue Neighborhood</h2>
    <author class='artist'>Troye Sivan</author>
  </div>
</div>
</body>
</html>

9. 3D Music player card animation

Made by Mazlum YΔ±ldΔ±rΔ±m. A working 3D Music player card with animations. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<link rel='stylesheet' href='https://fonts.googleapis.com'>
<link rel='stylesheet' href='https://fonts.gstatic.com'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Georama:[email protected];300;500&amp;display=swap'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
  
<style>
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Georama', sans-serif;
        }
        
        body {
            background-color: rgb(31, 31, 31);
            overflow: hidden;
        }
        
        .section {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            perspective: 1000px;
        }
        
        .section__background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .section__background:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            background-color: rgba(31, 31, 31, .8);
            height: 100vh;
            backdrop-filter: blur(20px);
            z-index: 11;
        }
        
        .section__background-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .music-card {
            position: relative;
            max-width: 400px;
            width: 100%;
            height: auto;
            border-radius: 25px;
            transform-style: preserve-3d;
            transition: all .2s linear;
            z-index: 2;
        }
        
        .music-card.right-weight {
            transform: rotateY(4deg) rotateX(-5deg);
        }
        
        .music-card.middle-weight {
            transform: rotateY(0) rotateX(-5deg);
        }
        
        .music-card.left-weight {
            transform: rotateY(-4deg) rotateX(-5deg);
        }
        
        .music-card__wrapper {
            position: relative;
            z-index: 1;
        }
        
        .music-card__content {
            padding-bottom: 20px;
        }
        
        .music-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, .2);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            z-index: -1;
        }
        
        .music-image {
            position: relative;
            width: 400px;
            height: 400px;
            left: 20px;
            top: -20px;
            border-radius: 20px;
            object-fit: cover;
            filter: drop-shadow(-20px 10px 10px rgba(0, 0, 0, 0.25));
        }
        
        .music-image.animate {
            animation-name: coverAnimate;
            animation-duration: .3s;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
        }
        
        .music-info {
            padding-inline: 20px;
        }
        
        .music-name {
            font-size: 1.4em;
            color: rgba(255, 255, 255, .8);
            margin-bottom: 4px;
            line-height: 1;
        }
        
        .music-artist {
            font-size: 1em;
            color: rgba(255, 255, 255, .5);
        }
        
        .music-controls {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 20px;
            margin-inline: auto;
            width: 270px;
        }
        
        .music-controls-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            padding: 6px;
            border-radius: 50%;
            cursor: pointer;
            transition: ease-in-out .2s;
        }
        
        .play-icon-background {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #a5a5a5;
            z-index: -1;
            opacity: 0;
            pointer-events: none;
            filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .25));
            transition: all .2s;
        }
        
        .music-controls-item#play .play-icon {
            filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, .3));
            transition: all .2s;
        }
        
        .music-controls-item#play:hover .play-icon-background {
            animation-name: playIconBackgroundAnimate;
            animation-duration: .3s;
            animation-iteration-count: 1;
            opacity: 1;
        }
        
        .music-controls-item#play:hover .play-icon {
            animation-name: playIconAnimate;
            animation-duration: .3s;
            animation-iteration-count: 1;
        }
        
        .music-controls-item:hover:not(#play) {
            background: #a5a5a5;
        }
        
        .music-controls-item--icon {
            font-size: 1.2em;
            color: #fff;
        }
        
        .music-progress {
            position: relative;
            width: calc(100% - 40px);
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 20px;
            cursor: pointer;
        }
        
        .music-progress-bar {
            position: relative;
            width: 0;
            height: 5px;
            border-radius: 5px;
            background-color: #fff;
        }
        
        .music-progress-bar:after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            background: rgba(255, 255, 255, 1);
            filter: drop-shadow(0px 0px 4px rgba(46, 45, 45, 1));
            border-radius: 50%;
            box-sizing: border-box;
        }
        
        .music-progress:before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 5px;
            background: rgba(255, 255, 255, .3);
            border-radius: 5px;
            z-index: -1;
        }
        
        .music-progress__time {
            position: absolute;
            top: 12px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .music-progress__time-item {
            color: #fff;
            font-size: 12px;
            opacity: .4;
        }
        
        @keyframes coverAnimate {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.98);
            }
            100% {
                transform: scale(1);
            }
        }
        
        @-webkit-keyframes coverAnimate {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.98);
            }
            100% {
                transform: scale(1);
            }
        }
        
        @keyframes playIconAnimate {
            0% {
                transform: scale(1);
            }
            20% {
                transform: scale(1);
            }
            85% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }
        
        @keyframes playIconBackgroundAnimate {
            0% {
                opacity: 1;
                transform: scale(0.7);
                filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .1));
            }
            65% {
                transform: scale(1.1);
                filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .25));
            }
            85% {
                transform: scale(1);
                filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .18));
                opacity: 1;
            }
            100% {
                transform: scale(1);
                filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .18));
                opacity: 1;
            }
        }
        
        @media screen and (max-width: 480px) {
            .music-image {
                width: 100%;
                max-width: calc(100% - 40px);
                margin: 20px;
                left: unset;
                top: unset;
                height: 360px;
                border-radius: 12px;
                filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.20));
            }
            .music-card {
                width: 100%;
                max-width: calc(100% - 20px);
                margin-inline: auto;
            }
        }
</style>
</head>
<body>
  <div class="section">
        <div class="section__background">
            <img id="backgroundImage" class="section__background-image" src="https://yildirimzlm.s3.us-east-2.amazonaws.com/post-malone-2.jpeg" alt="">
        </div>
        <div class="music-card__wrapper">
            <div class="music-card">
                <div class="music-card__content">
                    <img class="music-image" src="https://yildirimzlm.s3.us-east-2.amazonaws.com/post-malone-2.jpeg" alt="">
                    <div class="music-info">
                        <h2 class="music-name">Rockstar (feat.21 Savage)</h2>
                        <p class="music-artist">Post Malone</p>
                    </div>
                    <audio src="https://yildirimzlm.s3.us-east-2.amazonaws.com/Post+Malone+-+rockstar+ft.+21+Savage+(Official+Audio).mp3"></audio>
                    <div class="music-progress">
                        <div id="progress-bar" class="music-progress-bar"></div>
                        <div class="music-progress__time">
                            <span class="music-progress__time-item music-current-time">00:00</span>
                            <span class="music-progress__time-item music-duration-time">00:00</span>
                        </div>
                    </div>
                    <div class="music-controls">
                        <div id="prev" class="music-controls-item">
                            <i class="fas fa-backward music-controls-item--icon"></i>
                        </div>

                        <div id="play" class="music-controls-item">
                            <i class="fas fa-play music-controls-item--icon play-icon"></i>
                            <div class="play-icon-background"></div>
                        </div>

                        <div id="next" class="music-controls-item">
                            <i class="fas fa-forward music-controls-item--icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script id="rendered-js" >
const next = document.querySelector('#next');
const play = document.querySelector('#play');
const prev = document.querySelector('#prev');
const progressBar = document.querySelector('#progress-bar');
const musicTitle = document.querySelector('.music-name');
const musicCard = document.querySelector('.music-card');
const musicArtist = document.querySelector('.music-artist');
const musicCover = document.querySelector('.music-image');
const musicCurrentTime = document.querySelector('.music-current-time');
const musicDurationTime = document.querySelector('.music-duration-time');
const backgroundImage = document.querySelector('#backgroundImage');
const music = document.querySelector('audio');
const progressZone = document.querySelector('.music-progress');

let isPlaying = false;
// default select first music
let selectedMusic = 1;

play.addEventListener('click', () => {
  isPlaying ? pauseMusic() : playMusic();
});

const playList = [{
  artist: 'Post Malone',
  cover: 'https://yildirimzlm.s3.us-east-2.amazonaws.com/post-malone-2.jpeg',
  musicName: 'Rockstar ft. 21 Savage',
  musicPath: `https://yildirimzlm.s3.us-east-2.amazonaws.com/Post+Malone+-+rockstar+ft.+21+Savage+(Official+Audio).mp3` },
{
  artist: 'Unlike Pluto',
  cover: 'https://yildirimzlm.s3.us-east-2.amazonaws.com/unlike-pluto.jpeg',
  musicName: 'No Scrubs ft. Joanna Jones',
  musicPath: `https://yildirimzlm.s3.us-east-2.amazonaws.com/Unlike+Pluto+-+No+Scrubs+ft.+Joanna+Jones+(Cover).mp3` },
{
  artist: 'Post Malone',
  cover: 'https://yildirimzlm.s3.us-east-2.amazonaws.com/circles.jpeg',
  musicName: 'Circles',
  musicPath: `https://yildirimzlm.s3.us-east-2.amazonaws.com/Post+Malone+-+Circles+(Lyrics).mp3` },
{
  artist: 'Lil Nas X',
  cover: 'https://yildirimzlm.s3.us-east-2.amazonaws.com/montero.jpeg',
  musicName: 'MONTERO (Call Me By Your Name)',
  musicPath: `https://yildirimzlm.s3.us-east-2.amazonaws.com/Lil+Nas+X+-+MONTERO+(Call+Me+By+Your+Name)+(Lyrics).mp3` },
{
  artist: 'Post Malone',
  cover: 'https://yildirimzlm.s3.us-east-2.amazonaws.com/post-malone-1.jpeg',
  musicName: 'Better Now',
  musicPath: `https://yildirimzlm.s3.us-east-2.amazonaws.com/Post+Malone+-+Better+Now.mp3` }];


const playMusic = () => {
  music.play();
  document.querySelector('.play-icon').classList.replace('fa-play', 'fa-pause');
  isPlaying = true;
  fadeInCover();
  musicCard.classList.add('middle-weight');
  setTimeout(() => {
    musicCard.classList.remove('middle-weight');
  }, 200);
};

const pauseMusic = () => {
  music.pause();
  document.querySelector('.play-icon').classList.replace('fa-pause', 'fa-play');
  isPlaying = false;
  fadeInCover();
  musicCard.classList.add('middle-weight');
  setTimeout(() => {
    musicCard.classList.remove('middle-weight');
  }, 200);
};

const nextMusic = () => {
  selectedMusic = (selectedMusic + 1) % playList.length;
  loadMusic(playList[selectedMusic]);
  music.duration = 0;
  if (isPlaying) {
    music.play();
  }
  musicCard.classList.add('right-weight');
  progressBar.style.width = `0%`;
  setTimeout(() => {
    musicCard.classList.remove('right-weight');
  }, 200);
};

const prevMusic = () => {
  selectedMusic = (selectedMusic - 1 + playList.length) % playList.length;
  loadMusic(playList[selectedMusic]);
  if (isPlaying) {
    music.play();
  }
  musicCard.classList.add('left-weight');
  progressBar.style.width = `0%`;
  setTimeout(() => {
    musicCard.classList.remove('left-weight');
  }, 200);
};

const loadMusic = playList => {
  musicArtist.textContent = playList.artist;
  musicTitle.textContent = playList.musicName;
  music.src = playList.musicPath;
  musicCover.src = `${playList.cover}`;
  backgroundImage.src = `${playList.cover}`;
  backgroundImage.animate([{
    opacity: 0 },
  {
    opacity: 1 }],
  {
    duration: 400 });

  fadeInCover();
};

const fadeInCover = () => {
  musicCover.classList.add('animate');
  setTimeout(() => {
    musicCover.classList.remove('animate');
  }, 300);
};

// Update progress
const updateProgress = e => {
  const {
    duration,
    currentTime } =
  e.srcElement;
  const progressPercent = currentTime / duration * 100;
  progressBar.style.width = `${progressPercent}%`;

  if (progressPercent == 100) {
    setTimeout(() => {
      nextMusic();
    }, 500);
  }
};

// Set progress
function setProgress(e) {
  const width = this.clientWidth;
  const setPoint = e.offsetX;
  const duration = music.duration;
  music.currentTime = setPoint / width * duration;
}

// Set time area
const setMusicTime = e => {
  const {
    duration,
    currentTime } =
  e.srcElement;
  calcSongTime(duration, musicDurationTime);
  calcSongTime(currentTime, musicCurrentTime);
};

const calcSongTime = (time, selectTime) => {
  time = Number(time);
  const m = Math.floor(time % 3600 / 60);
  const s = Math.floor(time % 3600 % 60);
  if (m < 10) {
    minute = "0" + m;
  } else minute = m;
  if (s < 10) {
    second = "0" + s;
  } else second = s;

  return selectTime.textContent = `${minute}:${second}`;
};

next.addEventListener('click', nextMusic);
prev.addEventListener('click', prevMusic);
music.addEventListener('timeupdate', updateProgress);
music.addEventListener('timeupdate', setMusicTime);
progressZone.addEventListener('click', setProgress);

function cardAnimate(e) {
  this.querySelectorAll('.music-card').forEach(function (boxMove) {
    const x = -(window.innerWidth / 3 - e.pageX) / 90;
    const y = (window.innerHeight / 3 - e.pageY) / 30;
    boxMove.style.transform = "rotateY(" + x + "deg) rotateX(" + y + "deg)";
  });
}
    </script>
</body>
</html>

10. CSS Music card with Buttons

Made by Seanghay. CSS Music card with Download and play button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700');

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
    color:white;
  font-family: Quicksand, Arial, san-serif;
}

body{
  height: 100vh;
  overflow: hidden;
}

.container{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background:#222831;
  height:100%;
}


.card{
  width:450px;
  background: #393E46;
  border-radius: 11px;
  padding: 7px;
}

.card > .content-layout{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin: 0px 10px;
}

.card > .content-layout img {
  width:160px;
  border-radius: 7px;

}

.button-layout{
  padding:7px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin-bottom: 7px
}

.card > .content-layout > figure {
  margin-bottom: 7px;
}
.content > .title {
  font-weight: 400;
  font-size: 1.3em; 
}

.content > .description {
  color: #8A8C8D;
  margin: 7px 0;
}


.content > .rating {
  color: #BBBBBB;
  margin-top: 10px;
  margin-bottom: 5px
}

.card > .content-layout > .content {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin-left: 10px;
}

.button{
  font-weight: 700;
  font-size:1.34em;
  margin:4px;
  
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  padding: 12px 0px;
  background:#F96D00;
  border:3px solid #F96D00;
  color: white;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}


.button.bordered {
  border:3px solid #F96D00;
  background: transparent;
  color: #F96D00;
}

.button:hover{
  background:white;
  border-color:white;
  color:#F96D00;
}

.rate-icons{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.rate-icons div:first-child{
  margin-left: 0;
}

.icon {
  width: 15px;
  height: 15px;
  margin:4px;
  background: transparent;
  border: 2px solid #F96D00;
  border-radius: 100%;
}

.icon.is-active {
  background: #F96D00;
}
</style>
</head>
<body>
  <div class="container">
  <div class="card">
    <div class="button-layout"><a class="button" href="#">Download</a><a class="button bordered" href="#">Play</a></div>
    <div class="content-layout">
      <figure><img src="https://3.bp.blogspot.com/-AiUU1qs8chE/WJSBIDIKbKI/AAAAAAAABNE/3SZME7z2czsCfq9fbkmp9FpPPUF847AAgCLcB/s1600/Town%2BCD%2BVol%2B103.jpg" alt="Image"/></figure>
      <div class="content">
        <h2 class="title">Town production vol. 20</h2>
        <h4 class="description">God dammit</h4>
        <h4 class="size">44.5MB</h4>
        <h4 class="rating">Rating</h4>
        <div class="rate-icons">
          <div class="icon is-active"></div>
          <div class="icon is-active"></div>
          <div class="icon is-active"></div>
          <div class="icon is-active"></div>
          <div class="icon"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

11. Music Card Example

Made by Vincent Loy. Simple Music card. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
.container {
  background: #fff;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.container .title {
  font-weight: bold;
  font-family: "roboto", sans-serif;
}
.container .title a {
  color: #000;
  text-decoration: none;
  position: relative;
  display: inline-block;
}
.container .title a:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -7px;
  height: 2px;
  background: #000;
  transition: 0.5s ease all;
}
.container .title a:hover {
  text-decoration: none;
}
.container .title a:hover:after {
  left: 0;
  right: 0;
}
.container .img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 560px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.container .img-container:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.container .squared {
  position: relative;
  z-index: 50;
  width: 95%;
  height: auto;
}
.container .blured {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  filter: blur(15px);
  width: 100%;
  transform: scale(2);
  transition: 1s ease all;
}
</style>
</head>
<body>
  <div class="container">
  <a href="https://www.youtube.com/watch?v=Xy9SRCjLlKQ" 
     target="_blank"
     class="img-container">
    <img src="https://img.discogs.com/ea7x15n1a_Ktuf9760TSGV0Fbw0=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-13947522-1564676443-6096.jpeg.jpg" alt="" class="blured">
    <img src="https://img.discogs.com/ea7x15n1a_Ktuf9760TSGV0Fbw0=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-13947522-1564676443-6096.jpeg.jpg" alt="" class="squared">
  </a>
  
  <p class="title">
    <a href="https://www.youtube.com/watch?v=Xy9SRCjLlKQ" 
       target="_blank">
      Prince Jammy - Kamikazy Dub
    </a>
  </p>
</div>
</body>
</html>

12. Music playlist card

Made by Oni. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background: #ed2771;
  font-family: "Source Sans Pro", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: white;
}

.playlist-container {
  font-family: "Source Sans Pro", sans-serif;
}

.head-title {
  font-size: 25px;
}

.created,
.song {
  font-size: 13px;
}

.playlist-container {
  margin: 150px auto;
  max-width: 1000px;
  width: 100%;
  height: 424px;
  display: flex;
  flex-wrap: wrap;
}

.album-cover {
  width: 300px;
  height: 300px;
  background: grey;
  position: relative;
  flex: 1 1 400px;
}
.album-cover .cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.right-section {
  width: 540px;
  height: 300px;
  flex: 1 1 60%;
}

.playlist-head {
  background: #282828;
  border-bottom: 1px solid #373737;
  padding: 12px 10px;
  line-height: 26px;
}

.song-list-container {
  height: 223px;
  overflow: auto;
}

.song {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  background: #2f2f2f;
  border-bottom: 1px solid #424242;
  height: 41px;
}
.song:hover {
  color: #ed2771;
}

.song:nth-child(odd) {
  background: #2f2f2f;
}

.song:nth-child(even) {
  background: #333333;
}
</style>
</head>
<body>
  <div class='playlist-container'>
  <div class='album-cover'>
    <img class='cover' src='https://s-media-cache-ak0.pinimg.com/736x/26/11/79/261179df4ee3e789c7570eea3487700b.jpg'>
  </div>
  <div class='right-section'>
    <div class='playlist-head'>
      <div class='head-title'>Chill Playlist</div>
      <div class='created'>Created by Oni Janoras</div>
    </div>
    <div class='song-list-container'>
      <div class='song'>
        <div class='title'>Afro Blue</div>
        <div class='duration'>5:06</div>
      </div>
      <div class='song'>
        <div class='title'>Elusive</div>
        <div class='duration'>4:13</div>
      </div>
      <div class='song'>
        <div class='title'>Ride</div>
        <div class='duration'>4:41</div>
      </div>
      <div class='song'>
        <div class='title'>Video Games</div>
        <div class='duration'>4:34</div>
      </div>
      <div class='song'>
        <div class='title'>It's Oh So Quiet</div>
        <div class='duration'>3:59</div>
      </div>
      <div class='song'>
        <div class='title'>It's Oh So Quiet</div>
        <div class='duration'>3:59</div>
      </div>
      <div class='song'>
        <div class='title'>It's Oh So Quiet</div>
        <div class='duration'>3:59</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

13. Simplistic music card

Made by Gadiel Amilec. Simplistic music card without any effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html, body {
  
}

#leftContent {
  background-color: lightgray;
  height: 350px;
  width: 350px;
  border-radius: 5px;
  position: relative;
  top: 120px;
  left: 450px;
}

#albumInfo {
  
}

#coverArt{
  border-radius: 5px;
  height: 150px ;
  Width: 150px;
  position: relative;
  left: 95px;
  bottom: 80px;
  box-shadow: 5px 5px 10px 1px #888888;
  
}

#albumTitle{
  position: relative;
  left: 15px;
  bottom: 80px;
}

#artistName{
  position: relative;
  left: 15px;
  bottom: 80px; 
}
</style>
</head>
<body>
  <head>
  <title> YBU015 </title>
</head>
<body>
  <div id="leftContent">
  <div id="albumInfo">
    <img src="https://res.cloudinary.com/dpoiom7ds/image/upload/v1553437067/a0831960798_16.jpg" id="coverArt" alt="Album cover">
    <h3 id="albumTitle">YBU015</h3>
    <h5 id="artistName">Will Fujiwara</h3>
  </div>
  </div>
</body>
  <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
</body>
</html>

14. Music UI Card

Made by Lali. Music UI Card with no animation or effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
  
<style>
.background {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1000px;
  background: #f3f3f3;
}

.music-card {
  width: 550px;
  height: 800px;
}
.music-card > .album-art {
  width: 100%;
  height: 50%;
  background: #dfdfdf;
}

.album-title {
  width: 100%;
  height: 12%;
  background: #1b1720;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
}
.album-title span {
  color: #ffffff;
  font-weight: bold;
  font-size: 2em;
}

.controls {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  background: #1b1720;
  border-bottom: 1px solid #4e4a53;
}
.controls > .icon {
  margin: auto 20px;
  color: #ffffff;
}
.controls .-act {
  color: #ead637;
}

table {
  width: 100%;
  background: #1b1720;
  font-size: 1.3em;
  color: #4e4a53;
}
table tr {
  line-height: 70px;
  margin: 0 20px;
}
table .star {
  text-align: center;
  width: 70px;
}

.song {
  text-align: left;
  padding: 0px 20px;
}

.time {
  text-align: right;
  padding-right: 20px;
}

.-active {
  background: #ead637;
  color: #ffffff;
}

.-current {
  background: #ffffff;
  color: #1f1b26;
}
</style>
</head>
<body>
  <div class='background'>
  <div class='music-card'>
    <div class='album-title'>
      <span class='ion-android-arrow-back'></span>
      <span>Every Open Eye</span>
      <span class='ion-ios-search-strong'></span>
    </div>
    <div class='album-art'>
      <img>
    </div>
    <div class='controls'>
      <div class='icon -act ion-ios-shuffle-strong'></div>
      <div class='icon ion-ios-skipbackward'></div>
      <div class='icon ion-ios-pause'></div>
      <div class='icon ion-ios-skipforward'></div>
      <div class='icon ion-ios-loop-strong'></div>
    </div>
    <div class='tracks'>
      <table>
        <tbody>
          <tr>
            <td class='star ion-android-star'></td>
            <td class='song'>Clearest Blue</td>
            <td class='time'>3:54</td>
          </tr>
          <tr>
            <td class='star -active ion-android-star'></td>
            <td class='song -current'>Bury It</td>
            <td class='-current time'>2:15 / 3:09</td>
          </tr>
          <tr>
            <td class='star ion-android-star'></td>
            <td class='song'>Never Ending Circles</td>
            <td class='time'>3:07</td>
          </tr>
          <tr>
            <td class='star ion-android-star'></td>
            <td class='song'>Leave A Trace</td>
            <td class='time'>3:57</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</body>
</html>

15. Music Card Basic

Made by Omar Mustafa. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
  
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat|Roboto");
body {
  background-image: url("http://leftrightmusic.com/assets/img/site/lr-coin-anaglyph.svg"), url("http://leftrightmusic.com/assets/img/site/bg.jpg");
  background-size: 250px, cover;
  background-blend-mode: lighten, normal;
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, center;
  opacity: 0.55; }

header,
footer {
  font-family: "Montserrat", sans-serif;
  height: 50px;
  background: transparent;
  color: #CACACA; }
  @media (max-width: 767px) {
    header,
    footer {
      padding-left: 2px;
      padding-right: 2px; } }
  header ul li,
  footer ul li {
    padding-left: 2.5px;
    padding-right: 2.5px; }

header {
  margin-top: 0.5rem; }
  header a:hover {
    color: #CACACA;
    padding-bottom: 1.5px;
    border-bottom: #CACACA 1px solid; }
  header a::after {
    position: absolute;
    left: 0;
    content: "";
    width: 10%;
    height: 1px;
    background: #CACACA;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
    bottom: -8px; }

.fixed-top {
  max-width: 75vw;
  left: calc(25vw / 2); }

main {
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  width: 100vw;
  height: calc(100vh - 100px);
  top: 50px; }
  main .container {
    max-width: 75vw; }
    @media (max-width: 767px) {
      main .container {
        max-width: 100vw;
        padding-left: 5px;
        padding-right: 5px; } }

footer ul {
  max-width: 50%; }

a {
  color: #CACACA; }
  a:hover {
    color: #c9c9c9;
    text-decoration: none; }

a.active {
  border-bottom: 1px #CACACA solid; }

.lrm-card {
  background-color: transparent;
  margin: .5rem auto 1.5rem auto;
  padding: 0.1rem;
  max-width: 70vw; }
  .lrm-card .card-header {
    border: none;
    text-transform: uppercase; }
    .lrm-card .card-header ul {
      border: none; }
      .lrm-card .card-header ul:hover {
        border: none; }
    .lrm-card .card-header li {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-left: black 5px solid;
      border-right: black 5px solid; }
      .lrm-card .card-header li a {
        border: none;
        color: #CACACA;
        background-color: none; }
        .lrm-card .card-header li a:hover {
          background-color: #CACACA;
          border: none;
          color: black; }
      .lrm-card .card-header li .nav-link.active {
        background-color: #CACACA;
        color: black;
        border: none; }
        .lrm-card .card-header li .nav-link.active:hover {
          border: none; }
  .lrm-card .card-body {
    padding-left: 0px;
    padding-right: 0px; }

h4.card-title {
  text-transform: uppercase; }

.minigram-card {
  background-color: transparent; }

.tint {
  position: relative;
  float: left;
  cursor: pointer; }
  .tint::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: none;
    transition: background .3s linear; }
  .tint:hover::before {
    background: rgba(11, 11, 11, 0.5); }

.lrm-card-contact {
  max-width: 75vw; }
  .lrm-card-contact .lrm-header-underline {
    padding: 2px 4px;
    border-bottom: 1px #CACACA solid; }
  .lrm-card-contact .card-body {
    line-height: 0.5; }
    .lrm-card-contact .card-body h2.card-title {
      text-transform: uppercase; }
    .lrm-card-contact .card-body .card-text a {
      color: #969696;
      transition: color 250ms; }
      .lrm-card-contact .card-body .card-text a:hover {
        color: #CACACA; }

.lrm-card-music .card-header {
  padding-top: 0;
  padding-bottom: 0; }
  .lrm-card-music .card-header i {
    margin-right: 2px; }
.lrm-card-music .card-body {
  padding: 0; }
@media (max-width: 767px) {
  .lrm-card-music .card-header .nav-link {
    padding: .25rem .5rem; }
  .lrm-card-music .card-header .fa-fw {
    display: none; } }
@media (max-width: 400px) {
  .lrm-card-music ul li {
    font-size: 9px; }
  .lrm-card-music .card-header .nav-link {
    padding: .25rem .25rem; } }

#lrm-tour-bit {
  font-size: calc(calc(calc(1em + 0.5vw) / 3) * 2); }
  @media (max-width: 767px) {
    #lrm-tour-bit .bit-widget .bit-no-dates-container .bit-track-button {
      width: 50%; } }

#lrm-sb::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: transparent; }

#lrm-sb::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(13, 13, 13, 0.75); }

#lrm-sb::-webkit-scrollbar-thumb {
  background-color: rgba(19, 19, 19, 0.1);
  border: 1px solid rgba(202, 202, 202, 0.15); }

#lrm-test-scroll {
  height: auto; }

/* 
 * #instafetch 
 */
.minigram {
  width: 100%;
  height: auto;
  margin: 0 auto; }
  .minigram card {
    background-color: transparent;
    float: left;
    width: calc(calc(100% / 3) - 10px);
    height: auto;
    margin: 5px;
    box-sizing: border-box; }
  .minigram card img {
    width: 100%;
    opacity: 1;
    transition: opacity, 1s; }
    .minigram card img:hover {
      opacity: 0.5;
      transition: opacity, 500ms; }

html {
  font-size: 9px; }

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
  font-size: calc(1em + 0.5vw);
  line-height: calc(1.2em + 0.5vw);
  color: #CACACA; }

ul {
  list-style: none;
  text-transform: uppercase; }
</style>
</head>
<body>
  <div id="lrm-main-container" class="d-flex flex-column align-items-center justify-content-between mx-auto">
        <header class="align-self-center justify-content-center fixed-top clearfix">
            <ul class="d-flex flex-row justify-content-around p-4 lrm-nav">
                <li>
                    <a href="#" class="active">Home</a>
                </li>
                <li>
                    <a href="http://leftrightmusic.com/music/">Music</a>
                </li>
                <li>
                    <a href="http://leftrightmusic.com/media/">Media</a>
                </li>
                <li>
                    <a href="https://squareup.com/store/leftrightmusic/" alt="Left Right Music merch store on squareup.com">Merch</a>
                </li>
                <li>
                    <a href="http://leftrightmusic.com/tour/">Tour</a>
                </li>
                <li>
                    <a href="http://leftrightmusic.com/contact/">Contact</a>
                </li>
            </ul>
        </header>

        <main id="lrm-sb" class="align-self-center justify-content-center clearfix mx-auto">
            <div class="container mt-4">
                <div class="row" id="lrm-test-scroll">
                    <div class="col-sm-12">
                        <div class="card lrm-card">
                            <div class="card-body">
                                <!-- Home page content is empty. -->
                                <!-- What are you doing looking at this code? -->
                                <!-- Go away!!!! *shakes cane at you* -->
                                <!-- JK...pls don't go...press some of the links above! -->
                                <!-- Or buy a T-Shirt! -->
                                <!-- Yeah, that!! Buy stuff!! -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <footer class="align-self-center justify-content-center fixed-bottom">
            <ul class="d-flex flex-row justify-content-around mx-auto p-4 lrm-nav">
                <li>
                    <a href="https://facebook.com/leftrightmusicofficial">
                        <i class="fab fa-facebook" aria-hidden="true"></i>
                    </a>
                </li>
                <li>
                    <a href="https://soundcloud.com/leftrightmusic">
                        <i class="fab fa-soundcloud" aria-hidden="true"></i>
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com/leftrightmusic">
                        <i class="fab fa-twitter" aria-hidden="true"></i>
                    </a>
                </li>
                <li>
                    <a href="https://instagram.com/leftrightmusic/">
                        <i class="fab fa-instagram" aria-hidden="true"></i>
                    </a>
                </li>
                <li>
                    <a href="https://youtube.com/leftrightmusic/">
                        <i class="fab fa-youtube" aria-hidden="true"></i>
                    </a>
                </li>
                <li>
                    <a href="https://play.spotify.com/artist/51CYFAd4sqtPffWlLpAVQ4">
                        <i class="fab fa-spotify" aria-hidden="true"></i>
                    </a>
                </li>
            </ul>
        </footer>

    </div>
    <div id="bg"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'></script>
<script src='https://use.fontawesome.com/releases/v5.0.0/js/all.js'></script>
      <script id="rendered-js" >
document.onclick = function (argument) {
  var conf = confirm("Fullscreen mode?");
  var docelem = document.documentElement;

  if (conf == true) {
    if (docelem.requestFullscreen) {
      docelem.requestFullscreen();
    } else
    if (docelem.mozRequestFullScreen) {
      docelem.mozRequestFullScreen();
    } else
    if (docelem.webkitRequestFullScreen) {
      docelem.webkitRequestFullScreen();
    } else
    if (docelem.msRequestFullscreen) {
      docelem.msRequestFullscreen();
    }
  }
};
    </script>
</body>
</html>

16. Music Cards with Hover Effects

Made by Nidhi Verma. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  margin: 0px;
  max-width: 100vw;
  height: 100vh;
  background: black;
  font-family: sans-serif;
  color: white;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.card-container {
  display: grid;
 grid-template-columns: repeat(3, 300px);
  grid-gap: 10px 10px;
  width: 90%;
  align-self: center;
}

.music-card {
  box-sizing: border-box;
  width: 250px;
  height: 300px;
  border-radius: 15px;
  background: #242424;
  padding: 25px 20px;
  text-align: center;
}

.music-card > img {
  width: 200px;
  height: 200px;
  background-size: center;
}

.music-card > h4 {
  font-size: 14px;
  margin: 10px 0px 5px;
}

.music-card > p {
  width: 200px;
  height: 12px;
  margin: 0;
  marigin-top: 5px;
  font-size: 12px;
  overflow: hidden;
}

.music-card:hover {
  opacity: 0.5;
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="card-container">
    <div class="music-card">
      <img src="https://3.bp.blogspot.com/-cvF9UEYgmkc/V37qCNZQwLI/AAAAAAAAAbY/3Vrvqlv9tvkwpfB4f-qiq-ZuD5PsBKawQCLcB/s1600/DL%2B-%2BDL.png">
      <h4>This is Dua Lipa</h4>
      <p>This is Dua Lipa. The essential tracks, all in one playlist.</p>
    </div>
    <div class="music-card">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQboHxhiBPxDYQBpLPa-NHHVhpHk4udSIt9RQ&usqp=CAU">
      <h4>This is James Bay.</h4>
      <p>This is James Bay. The essential tracks, all in one playlist.</p>
    </div>
    <div class="music-card">
      <img src="https://pbs.twimg.com/profile_images/1290872226728878080/gBBWXz9H_400x400.jpg">
      <h4>This is Katy Perry</h4>
      <p>This is Katy Perry. The essential tracks, all in one playlist.</p>
    </div>
  </div>
</div>
</body>
</html>