About
Playlist HTML Builder
Basic Info
Page Title
Playlist Heading
Description
Favicon (optional)
Playlist Image
Audio Files
Top Section Background
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Gradient angle controls direction: 0 is vertical, 90 is horizontal.
Image
Track Section Background
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Gradient angle controls direction: 0 is vertical, 90 is horizontal.
Image
This is the base background behind both panels (including the space between them).
Song List + Controls Panel Background
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Image
Metadata + Player Panel Background
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Image
Song List Background
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Gradient angle controls direction: 0 is vertical, 90 is horizontal.
Image
Make sure your song text color has strong contrast against this background so tracks stay readable.
Player Bar Background
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
This controls the player bar area (play/pause/download/seek bar container).
Image
Player Text + Line Style
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
This controls both the player text and the seek line fill style.
Image
Stroke Width (px)
Stroke Color
Shadow Color
Shadow X (px)
Shadow Y (px)
Shadow Blur (px)
Choose a style that contrasts with the player bar background so controls stay readable.
Description Text Style
Text Fill
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Gradient angle controls direction: 0 is vertical, 90 is horizontal.
Image
Stroke Width (px)
Stroke Color
Shadow Color
Shadow X (px)
Shadow Y (px)
Shadow Blur (px)
Shadow X moves left/right, Shadow Y moves up/down, and Blur softens the shadow edge.
Song Text Style
Text Fill
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Gradient angle controls direction: 0 is vertical, 90 is horizontal.
Image
Stroke Width (px)
Stroke Color
Shadow Color
Shadow X (px)
Shadow Y (px)
Shadow Blur (px)
Shadow X moves left/right, Shadow Y moves up/down, and Blur softens the shadow edge.
Song List Name Text Style
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Image
Stroke Width (px)
Stroke Color
Shadow Color
Shadow X (px)
Shadow Y (px)
Shadow Blur (px)
Shadow X moves left/right, Shadow Y moves up/down, and Blur softens the shadow edge.
Metadata Text Style
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Image
Stroke Width (px)
Stroke Color
Shadow Color
Shadow X (px)
Shadow Y (px)
Shadow Blur (px)
Shadow X moves left/right, Shadow Y moves up/down, and Blur softens the shadow edge.
Prev/Next/Shuffle/Repeat Button Text + Border Style
Mode
Color
Gradient
Image
Color
Color A
Color B
Angle (deg)
Image
Build And Download Playlist HTML
This generator embeds all uploaded media as Base64 so the exported file is fully self-contained.