Custom styled scrollbar

<div class="scroll-box"><p>Scroll me. WebTricks is a growing toolbox of fast, in-browser tools and ready-to-copy snippets for web developers. Compress images, convert colors, generate CSS, all without leaving the browser. Keep scrolling to see the custom scrollbar across the whole track. Almost there. Done.</p></div>

:root {
    --sb-width: 10px;
    --thumb: #6b46ff;
    --box-bg: #1d1f27;
}

.scroll-box {
    max-width: 320px;
    max-height: 140px;
    overflow-y: auto;
    padding: 12px 16px;
    background: var(--box-bg);
    border-radius: 10px;
    color: #e8eaed;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--thumb) transparent;
}

/* Chromium / Safari */
.scroll-box::-webkit-scrollbar {
    width: var(--sb-width);
}
.scroll-box::-webkit-scrollbar-track {
    background: transparent;
}
.scroll-box::-webkit-scrollbar-thumb {
    background: var(--thumb);
    border-radius: 999px;
    border: 2px solid var(--box-bg);   /* track-colored inset */
}
.scroll-box::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.2);
}