Techniques
Album-Art Gradient Backdrop
Spotify extracts dominant colors from album art and projects a soft radial gradient behind the content header — giving each playlist and artist page a unique, immersive feel without any custom design work.
.album-gradient-backdrop {
position: relative;
background: linear-gradient(
180deg,
var(--dominant-album-color, #1db954) 0%,
#121212 60%
);
padding: 64px 32px 32px;
}
.album-gradient-backdrop::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(18, 18, 18, 0.6) 40%,
#121212 100%
);
pointer-events: none;
}
Green Pill Play Button
The iconic Spotify play button — a full-pill green circle with black icon that appears on card hover with a subtle scale-up entrance. The defining interactive element of the entire streaming genre.
.play-button {
width: 48px;
height: 48px;
border-radius: 9999px;
background-color: #1db954;
color: #000000;
border: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(8px);
transition: opacity 250ms ease, transform 250ms ease, background-color 120ms ease;
}
.card:hover .play-button {
opacity: 1;
transform: translateY(0);
}
.play-button:hover {
background-color: #1ed760;
transform: scale(1.06);
}
Dark Card with Art Slot
The standard Spotify browse card — a dark `#181818` rectangle with album art occupying the top half, text metadata below, and a hover state that lifts the entire card with a subtle background shift.
.spotify-card {
background: #181818;
border-radius: 8px;
padding: 16px;
transition: background-color 250ms ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.spotify-card:hover {
background: #282828;
}
.spotify-card .art {
width: 100%;
aspect-ratio: 1;
border-radius: 6px;
object-fit: cover;
margin-bottom: 16px;
}
.spotify-card .title {
color: #ffffff;
font-weight: 700;
font-size: 1rem;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.spotify-card .subtitle {
color: #b3b3b3;
font-size: 0.875rem;
font-weight: 400;
}