Skip to content

Examples

Repositioning

  • Right

    theme.css
    #song-container {
        right: 0;
        transform-origin: right;
    }
    
  • Bottom left

    theme.css
    #song-container {
        bottom: 0;
    }
    
  • Bottom right

    theme.css
    #song-container {
        bottom: 0;
        right: 0;
        transform-origin: right;
    }
    

Blurred Background

Screenshot of Current Song 2 with blurred-bg.css as theme

blurerd-bg.css
:root {
    --theme-color: white;
    --image-overlay-opacity: 75%;
}

#song-container.with-image::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background: var(--image-url);
    background-position: center;
    opacity: var(--image-overlay-opacity, 100%);
    filter: blur(10px);
    transform: scale(200%);
}

#song-container.with-image * {
    z-index: 1;
}

#song-info :is(h1, h2) {
    text-shadow: 0px 1px 5px #fff5;
}

Transparent Background

Screenshot of Current Song 2 with transparent.css as theme

transparent.css
:root {
    --text-shadow-color: #0007;
}

#song-container {
    background: transparent;
    transition: none;
    overflow: visible;
    box-shadow: none;
}

#song-info :is(h1, h2) {
    text-shadow: 1px 4px 15px var(--text-shadow-color, #0007);
}