Tiny Floating Fake Spotify Playlist!!!

19 hours ago — by ★ 𝐫𝐱𝐦𝐞𝐨 ★ — Misc — used 0 times

A smaller version of my floating Spotify playlist, without the songs. Can be pasted into either the top or bottom of your CSS. If it doesn't work in one spot, try moving it to another! Hope you like it!
Let me know if you want more :))

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

<!-- FLOATING SPOTIFY PLAYLIST BY ★ 𝐫𝐱𝐦𝐞𝐨 ★ -->
<!-- https://friendrewind.com/layouts/element.php?id=46 -->
<div class="custom-spotify-widget">
  <a href="YOUR PLAYLIST LINK HERE" target="_blank" rel="noopener noreferrer">
    <div class="player-body">
      <!-- Left side: Album/Playlist Artwork Cover -->
      <img src="YOUR IMAGE OR GIF URL HERE" class="player-art" alt="Playlist Cover"/>
      
      <!-- Right side: Track/Playlist Details -->
      <div class="player-details">
        <div class="playlist-title">PLAYLIST NAME HERE</div>
        <div class="playlist-author">by YOUR NAME HERE</div>
        <div class="spotify-status-tag">▶ Click to Stream</div>
      </div>
    </div>
  </a>
</div>

<style>
  .custom-spotify-widget {
    position: fixed !important;   
    left: 20px !important;         /* LOWER NUMBER IS MORE LEFT, HIGHER NUMBER IS MORE RIGHT */
    top: 135px !important;         /* LOWER NUMBER IS UP, HIGHER NUMBER IS DOWN */
    z-index: 2147483647 !important; /* MAKES SURE IT SITS ON TOP OF EVERYTHING, DO NOT CHANGE */
    width: 210px !important;       /* HIGHER NUMBER IS WIDER :) */
  }

  .custom-spotify-widget a {
    text-decoration: none !important;
    display: block !important;
  }

  .player-body {
    background: #0d0d11 !important;
    border: 1px solid #22222a !important;
    border-radius: 8px !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;

  }

  .player-art {
    width: 55px !important;
    height: 55px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    display: block !important;
  }

  .player-details {
    display: flex !important;
    flex-direction: column !important;
    font-family: monospace !important;
    overflow: hidden !important;
  }

  .playlist-title {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  .playlist-author {
    color: #666666 !important;
    font-size: 9px !important;
    margin-top: 2px !important;
  }

  .spotify-status-tag {
    color: #1DB954 !important; /* SPOTIFY GREEN, CHANGEABLE */
    font-size: 9px !important;
    margin-top: 6px !important;
    font-weight: bold !important;
  }

  
  @media (max-width: 1200px) {
    .custom-spotify-widget {
      display: none !important;
    }
  }
</style>

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Misc

« Back to Misc | « All Profile Elements