SCRIPTED RESOURCES

scripted resources scripted.neocities.org

• Tutorial: Create frame and borders from material websites - This tutorial can be applied to images, scrollbox and any elements you like to put a decorative frame on.

• Adding overflow: scroll; in your style makes an element scrollable.

Border

Dashed

<body>
  <div id="container">
    Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans.
  </div>

#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
     border: 3px dashed purple;
    }
  </style>
</body>

Dotted

Double

Glowcross (c) lovermonth

Rainbow

Skewed

Uneven

Scrollbar

Invisible

#container::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

#container::-webkit-scrollbar-thumb {
      background: transparent;
    }
  </style>
</body>

#container::-webkit-scrollbar {
        width: 8px;
        }

#container::-webkit-scrollbar-track {
        background-color: #e4e4e4;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        }

#container::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #e4e4e4;
        border: 1px solid #aaa;
        }
        
      
  </style>
</body>

Style 3

::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }

::-webkit-scrollbar-track {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
      image-rendering: pixelated;
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

::-webkit-scrollbar-track:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

::-webkit-scrollbar-thumb {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      z-index: 1;
    }

::-webkit-scrollbar-corner {
      background-color: #cccccc;
    }

::-webkit-resizer {
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
      background-position: bottom right;
      background-repeat: no-repeat;
      image-rendering: pixelated;
    }

::-webkit-scrollbar-button,
    .scroll::-webkit-scrollbar-button {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      display: block;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      image-rendering: pixelated;
      background-repeat: no-repeat;
      background-position: center center;
    }

::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      background-position: 2px 2px;
    }

::-webkit-scrollbar-button:horizontal:decrement,
    .scroll::-webkit-scrollbar-button:horizontal:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
    }

::-webkit-scrollbar-button:horizontal:increment,
    .scroll::-webkit-scrollbar-button:horizontal:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
    }

::-webkit-scrollbar-button:vertical:decrement,
    .scroll::-webkit-scrollbar-button:vertical:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
    }

::-webkit-scrollbar-button:vertical:increment,
    .scroll::-webkit-scrollbar-button:vertical:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
    }

::-webkit-scrollbar-button:horizontal:increment:start,
    .scroll::-webkit-scrollbar-button:horizontal:increment:start {
      display: none;
    }

::-webkit-scrollbar-button:horizontal:decrement:end,
    .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
      display: none;
    }

::-webkit-scrollbar-button:vertical:increment:start,
    .scroll::-webkit-scrollbar-button:vertical:increment:start {
      display: none;
    }

::-webkit-scrollbar-button:vertical:decrement:end,
    .scroll::-webkit-scrollbar-button:vertical:decrement:end {
      display: none;
    }

::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      border-top: 1px solid #868a8e;
      border-left: 1px solid #868a8e;
      border-bottom: 1px solid #868a8e;
      border-right: 1px solid #868a8e;
      box-shadow: none;
    }
  </style>
</body>

Style 4

<style>

#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

::-webkit-scrollbar {
        width: 14px;
        }

::-webkit-scrollbar:horizontal {
        height: 14px;
        }

::-webkit-scrollbar-corner {
        background: #eee;
        }

::-webkit-scrollbar-track:vertical {
        background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
        border-radius: 5px;
        }

::-webkit-scrollbar-track:horizontal {
        background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        border-radius: 5px;
        }

::-webkit-scrollbar-thumb {
        border: 1.5px solid #888;
        border-radius: 5px;
        box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
        }

::-webkit-scrollbar-thumb:vertical {
        background: linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
        }

::-webkit-scrollbar-thumb:horizontal {
        background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
        }

::-webkit-scrollbar-button:horizontal:end:increment,
        ::-webkit-scrollbar-button:horizontal:start:decrement,
        ::-webkit-scrollbar-button:vertical:end:increment,
        ::-webkit-scrollbar-button:vertical:start:decrement {
        display: block;
        }

::-webkit-scrollbar-button:vertical {
        height: 15px;
        }

::-webkit-scrollbar-button:vertical:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #eee;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #888;
        border-radius: 5px;
        }

::-webkit-scrollbar-button:vertical:start:increment {
        display: none;
        }

::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
        }

::-webkit-scrollbar-button:vertical:end:increment {
        background: white;
        background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #eee;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #888;
        border-radius: 5px;
        }

::-webkit-scrollbar-button:horizontal {
        width: 14px
        }
        ::-webkit-scrollbar-button:horizontal:start:increment {
        display: none;
        }
        ::-webkit-scrollbar-button:horizontal:end:decrement {
        display: none;
        }

::-webkit-scrollbar-button:horizontal:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #888;
        }

::-webkit-scrollbar-button:horizontal:end:increment {
        background: white;
        background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #888;
        }
        
      
  </style>
</body>

Style 5

::-webkit-scrollbar {
      width: 16px;
    }

::-webkit-scrollbar:horizontal {
      height: 17px;
    }

::-webkit-scrollbar-corner {
      background: #eee;
    }

::-webkit-scrollbar-track:vertical {
      background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
    }

::-webkit-scrollbar-track:horizontal {
      background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
    }

::-webkit-scrollbar-thumb {
      border: 1.5px solid #888;
      border-radius: 3px;
      box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
      background-color: #eee;
    }

::-webkit-scrollbar-thumb:vertical {
      background: url("https://i.imgur.com/bfyvjnx.png") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
    }

::-webkit-scrollbar-thumb:horizontal {
      background: url("https://i.imgur.com/tqe4SxM.png") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
    }

::-webkit-scrollbar-button:horizontal:end:increment,
    ::-webkit-scrollbar-button:horizontal:start:decrement,
    ::-webkit-scrollbar-button:vertical:end:increment,
    ::-webkit-scrollbar-button:vertical:start:decrement {
      display: block;
    }

::-webkit-scrollbar-button:vertical {
      height: 17px;
    }

::-webkit-scrollbar-button:vertical:start:decrement {
      background: white;
      background-image: url("https://i.imgur.com/EFnEMEb.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

::-webkit-scrollbar-button:vertical:start:increment {
      display: none;
    }

::-webkit-scrollbar-button:vertical:end:decrement {
      display: none;
    }

::-webkit-scrollbar-button:vertical:end:increment {
      background: white;
      background-image: url("https://i.imgur.com/xuIt6Lc.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
  </style>
</body>

Ipod nano (c) b8nadryl

<div id="container">
    Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans.
  </div>

#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

::-webkit-scrollbar {
width: 14px
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
border-left: 1px solid #888;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, rgba(27,66,122,1) 0%, rgba(194,224,255,1) 28%, rgba(138,194,238,1) 55%, rgba(202,227,252,1) 87%);
  border-left: 1px solid #888;
}

/*horizontal scroll*/

::-webkit-scrollbar:horizontal {
height: 14px
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
 border-top: 1px solid #888;
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(180deg, rgba(27,66,122,1) 0%, rgba(194,224,255,1) 28%, rgba(138,194,238,1) 55%, rgba(202,227,252,1) 87%);
  border-top: 1px solid #888;
}
  </style>
</body>
</html>

Style 4 no buttons

#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

::-webkit-scrollbar {
width: 14px
}

::-webkit-scrollbar:horizontal {
height: 14px
}

::-webkit-scrollbar-corner {
background: #eee
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
border-radius: 5px; 
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
border-radius: 5px; 
}

::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 5px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
}
  </style>
</body>
</html>

Style 8

::-webkit-scrollbar {
  width: 17px
}

::-webkit-scrollbar-corner {
  background: #dfdfdf
}

::-webkit-scrollbar-track:vertical {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 1' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1m15 0h1'/%3E%3Cpath stroke='%23f3f1ec' d='M1 0h1'/%3E%3Cpath stroke='%23f4f1ec' d='M2 0h1'/%3E%3Cpath stroke='%23f4f3ee' d='M3 0h1'/%3E%3Cpath stroke='%23f5f4ef' d='M4 0h1'/%3E%3Cpath stroke='%23f6f5f0' d='M5 0h1'/%3E%3Cpath stroke='%23f7f7f3' d='M6 0h1'/%3E%3Cpath stroke='%23f9f8f4' d='M7 0h1'/%3E%3Cpath stroke='%23f9f9f7' d='M8 0h1'/%3E%3Cpath stroke='%23fbfbf8' d='M9 0h1'/%3E%3Cpath stroke='%23fbfbf9' d='M10 0h2'/%3E%3Cpath stroke='%23fdfdfa' d='M12 0h1'/%3E%3Cpath stroke='%23fefefb' d='M13 0h3'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-track:horizontal {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 1 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1M0 16h1'/%3E%3Cpath stroke='%23f3f1ec' d='M0 1h1'/%3E%3Cpath stroke='%23f4f1ec' d='M0 2h1'/%3E%3Cpath stroke='%23f4f3ee' d='M0 3h1'/%3E%3Cpath stroke='%23f5f4ef' d='M0 4h1'/%3E%3Cpath stroke='%23f6f5f0' d='M0 5h1'/%3E%3Cpath stroke='%23f7f7f3' d='M0 6h1'/%3E%3Cpath stroke='%23f9f8f4' d='M0 7h1'/%3E%3Cpath stroke='%23f9f9f7' d='M0 8h1'/%3E%3Cpath stroke='%23fbfbf8' d='M0 9h1'/%3E%3Cpath stroke='%23fbfbf9' d='M0 10h1m-1 1h1'/%3E%3Cpath stroke='%23fdfdfa' d='M0 12h1'/%3E%3Cpath stroke='%23fefefb' d='M0 13h1m-1 1h1m-1 1h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-thumb {
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: #c8d6fb;
  background-size: 7px;
  border: 1px solid #fff;
  border-radius: 2px;
  box-shadow: inset -3px 0 #bad1fc, inset 1px 1px #b7caf5
}

::-webkit-scrollbar-thumb:vertical {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 7 8' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eef4fe' d='M0 0h6M0 2h6M0 4h6M0 6h6'/%3E%3Cpath stroke='%23bad1fc' d='M6 0h1M6 2h1M6 4h1'/%3E%3Cpath stroke='%23c8d6fb' d='M0 1h1M0 3h1M0 5h1M0 7h1'/%3E%3Cpath stroke='%238cb0f8' d='M1 1h6M1 3h6M1 5h6M1 7h6'/%3E%3Cpath stroke='%23bad3fc' d='M6 6h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-thumb:horizontal {
  background-size: 8px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 8 7' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eef4fe' d='M0 0h1m1 0h1m1 0h1m1 0h1M0 1h1m1 0h1m1 0h1m1 0h1M0 2h1m1 0h1m1 0h1m1 0h1M0 3h1m1 0h1m1 0h1m1 0h1M0 4h1m1 0h1m1 0h1m1 0h1M0 5h1m1 0h1m1 0h1m1 0h1'/%3E%3Cpath stroke='%23c8d6fb' d='M1 0h1m1 0h1m1 0h1m1 0h1'/%3E%3Cpath stroke='%238cb0f8' d='M1 1h1m1 0h1m1 0h1m1 0h1M1 2h1m1 0h1m1 0h1m1 0h1M1 3h1m1 0h1m1 0h1m1 0h1M1 4h1m1 0h1m1 0h1m1 0h1M1 5h1m1 0h1m1 0h1m1 0h1M1 6h1m1 0h1m1 0h1m1 0h1'/%3E%3Cpath stroke='%23bad1fc' d='M0 6h1m1 0h1'/%3E%3Cpath stroke='%23bad3fc' d='M4 6h1m1 0h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/%3E%3Cpath stroke='%23fdfdfa' d='M1 0h1'/%3E%3Cpath stroke='%23fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/%3E%3Cpath stroke='%23e6eefc' d='M2 1h1'/%3E%3Cpath stroke='%23d0dffc' d='M3 1h1M2 2h1'/%3E%3Cpath stroke='%23cad8f9' d='M4 1h1M2 3h1'/%3E%3Cpath stroke='%23c4d2f7' d='M5 1h1'/%3E%3Cpath stroke='%23c0d0f7' d='M6 1h1'/%3E%3Cpath stroke='%23bdcef7' d='M7 1h1M2 6h1'/%3E%3Cpath stroke='%23bbcdf5' d='M8 1h1'/%3E%3Cpath stroke='%23b8cbf6' d='M9 1h1M2 7h1'/%3E%3Cpath stroke='%23b7caf5' d='M10 1h1M2 8h1'/%3E%3Cpath stroke='%23b5c8f7' d='M11 1h1'/%3E%3Cpath stroke='%23b3c7f5' d='M12 1h1'/%3E%3Cpath stroke='%23afc5f4' d='M13 1h1'/%3E%3Cpath stroke='%23dce6f9' d='M14 1h1'/%3E%3Cpath stroke='%23dfe2e1' d='M16 1h1'/%3E%3Cpath stroke='%23e1eafe' d='M3 2h1'/%3E%3Cpath stroke='%23dae6fe' d='M4 2h1M3 3h1'/%3E%3Cpath stroke='%23d4e1fc' d='M5 2h1M3 4h1'/%3E%3Cpath stroke='%23d1e0fd' d='M6 2h1M4 4h1'/%3E%3Cpath stroke='%23d0ddfc' d='M7 2h1M3 5h1'/%3E%3Cpath stroke='%23cedbfd' d='M8 2h1M6 3h1'/%3E%3Cpath stroke='%23cad9fd' d='M9 2h1M7 3h1M5 5h1'/%3E%3Cpath stroke='%23c8d8fb' d='M10 2h1'/%3E%3Cpath stroke='%23c5d6fc' d='M11 2h1m-8 8h1m1 0h1'/%3E%3Cpath stroke='%23c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/%3E%3Cpath stroke='%23bccefa' d='M13 2h1m-1 2h1m-9 9h2'/%3E%3Cpath stroke='%23b9c9f3' d='M14 2h1M5 14h3'/%3E%3Cpath stroke='%23cfd7dd' d='M16 2h1'/%3E%3Cpath stroke='%23d8e3fc' d='M4 3h1'/%3E%3Cpath stroke='%23d1defd' d='M5 3h1'/%3E%3Cpath stroke='%23c9d8fc' d='M8 3h1M6 4h2M5 6h2M3 7h1'/%3E%3Cpath stroke='%23c5d5fc' d='M9 3h1M3 9h1m3 0h1'/%3E%3Cpath stroke='%23c5d3fc' d='M10 3h1'/%3E%3Cpath stroke='%23bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/%3E%3Cpath stroke='%23bccdfa' d='M13 3h1'/%3E%3Cpath stroke='%23baccf4' d='M14 3h1'/%3E%3Cpath stroke='%23bdcbda' d='M16 3h1'/%3E%3Cpath stroke='%23c4d4f7' d='M2 4h1'/%3E%3Cpath stroke='%23cddbfc' d='M5 4h1M3 6h1'/%3E%3Cpath stroke='%23c8d5fb' d='M8 4h1'/%3E%3Cpath stroke='%23bbcefd' d='M10 4h3M9 5h1'/%3E%3Cpath stroke='%23bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c2d5' d='M16 4h1'/%3E%3Cpath stroke='%23bed0f8' d='M2 5h1'/%3E%3Cpath stroke='%23ceddfd' d='M4 5h1'/%3E%3Cpath stroke='%23c8d6fb' d='M6 5h2M3 8h2'/%3E%3Cpath stroke='%234d6185' d='M8 5h1M7 6h3M6 7h5M5 8h3m1 0h3M4 9h3m3 0h3m-8 1h1m5 0h1'/%3E%3Cpath stroke='%23bacdfc' d='M10 5h1m1 0h2M3 12h1'/%3E%3Cpath stroke='%23b9cdfb' d='M11 5h1m-2 1h1m1 0h2m-1 1h1'/%3E%3Cpath stroke='%23a8bbd4' d='M16 5h1'/%3E%3Cpath stroke='%23cddafc' d='M4 6h1'/%3E%3Cpath stroke='%23b7cdfc' d='M11 6h1m0 1h1'/%3E%3Cpath stroke='%23a4b8d3' d='M16 6h1'/%3E%3Cpath stroke='%23cad8fd' d='M4 7h2'/%3E%3Cpath stroke='%23b6cefb' d='M11 7h1m0 1h1'/%3E%3Cpath stroke='%23bacbf4' d='M14 7h1'/%3E%3Cpath stroke='%23a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/%3E%3Cpath stroke='%23c1d3fb' d='M8 8h1'/%3E%3Cpath stroke='%23b6cdfb' d='M13 8h1m-5 5h1'/%3E%3Cpath stroke='%23b9cbf3' d='M14 8h1'/%3E%3Cpath stroke='%23b4c8f6' d='M2 9h1'/%3E%3Cpath stroke='%23c2d5fc' d='M8 9h1m-1 1h1m-3 1h2'/%3E%3Cpath stroke='%23bdd3fb' d='M9 9h1m-2 3h1'/%3E%3Cpath stroke='%23b5cdfa' d='M13 9h1'/%3E%3Cpath stroke='%23b5c9f3' d='M14 9h1'/%3E%3Cpath stroke='%239fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c7f6' d='M2 10h1'/%3E%3Cpath stroke='%23c3d5fd' d='M7 10h1'/%3E%3Cpath stroke='%23bad4fc' d='M9 10h1m-1 1h1'/%3E%3Cpath stroke='%23b2cffb' d='M10 10h1m1 0h1m-2 2h1'/%3E%3Cpath stroke='%23b1cbfa' d='M13 10h1'/%3E%3Cpath stroke='%23b3c8f5' d='M14 10h1m-6 4h2'/%3E%3Cpath stroke='%23adc3f6' d='M2 11h1'/%3E%3Cpath stroke='%23c3d3fd' d='M5 11h1'/%3E%3Cpath stroke='%23c1d5fb' d='M8 11h1'/%3E%3Cpath stroke='%23b7d3fc' d='M10 11h1m-2 1h1'/%3E%3Cpath stroke='%23b3d1fc' d='M11 11h1'/%3E%3Cpath stroke='%23afcefb' d='M12 11h1'/%3E%3Cpath stroke='%23aecafa' d='M13 11h1'/%3E%3Cpath stroke='%23b1c8f3' d='M14 11h1'/%3E%3Cpath stroke='%23acc2f5' d='M2 12h1'/%3E%3Cpath stroke='%23c1d2fb' d='M5 12h1'/%3E%3Cpath stroke='%23bed1fc' d='M6 12h2'/%3E%3Cpath stroke='%23b6d1fb' d='M10 12h1'/%3E%3Cpath stroke='%23afccfb' d='M12 12h1'/%3E%3Cpath stroke='%23adc9f9' d='M13 12h1m-2 1h1'/%3E%3Cpath stroke='%23b1c5f3' d='M14 12h1'/%3E%3Cpath stroke='%23aac0f3' d='M2 13h1'/%3E%3Cpath stroke='%23b7cbf9' d='M3 13h1'/%3E%3Cpath stroke='%23b9cefb' d='M4 13h1'/%3E%3Cpath stroke='%23bbcef9' d='M7 13h1'/%3E%3Cpath stroke='%23b9cffb' d='M8 13h1'/%3E%3Cpath stroke='%23b2cdfb' d='M10 13h1'/%3E%3Cpath stroke='%23b0cbf9' d='M11 13h1'/%3E%3Cpath stroke='%23aec8f7' d='M13 13h1'/%3E%3Cpath stroke='%23b0c5f2' d='M14 13h1'/%3E%3Cpath stroke='%23dbe3f8' d='M2 14h1'/%3E%3Cpath stroke='%23b7c6f1' d='M3 14h1'/%3E%3Cpath stroke='%23b8c9f2' d='M4 14h1m3 0h1'/%3E%3Cpath stroke='%23b2c8f4' d='M11 14h1'/%3E%3Cpath stroke='%23b1c6f3' d='M12 14h1'/%3E%3Cpath stroke='%23b0c4f2' d='M13 14h1'/%3E%3Cpath stroke='%23d9e3f6' d='M14 14h1'/%3E%3Cpath stroke='%23aec0d6' d='M16 14h1'/%3E%3Cpath stroke='%23c3d4e7' d='M1 15h1'/%3E%3Cpath stroke='%23aec4e5' d='M15 15h1'/%3E%3Cpath stroke='%23edf1f3' d='M1 16h1'/%3E%3Cpath stroke='%23aac0e1' d='M2 16h1'/%3E%3Cpath stroke='%2394b1d9' d='M3 16h1'/%3E%3Cpath stroke='%2388a7d8' d='M4 16h1'/%3E%3Cpath stroke='%2383a4d3' d='M5 16h1'/%3E%3Cpath stroke='%237da0d4' d='M6 16h1m3 0h3'/%3E%3Cpath stroke='%237e9fd2' d='M7 16h1'/%3E%3Cpath stroke='%237c9fd3' d='M8 16h2'/%3E%3Cpath stroke='%2382a4d6' d='M13 16h1'/%3E%3Cpath stroke='%2394b0dd' d='M14 16h1'/%3E%3Cpath stroke='%23ecf2f7' d='M15 16h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/%3E%3Cpath stroke='%23fdfdfa' d='M1 0h1'/%3E%3Cpath stroke='%23fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/%3E%3Cpath stroke='%23e6eefc' d='M2 1h1'/%3E%3Cpath stroke='%23d0dffc' d='M3 1h1M2 2h1'/%3E%3Cpath stroke='%23cad8f9' d='M4 1h1M2 3h1'/%3E%3Cpath stroke='%23c4d2f7' d='M5 1h1'/%3E%3Cpath stroke='%23c0d0f7' d='M6 1h1'/%3E%3Cpath stroke='%23bdcef7' d='M7 1h1M2 6h1'/%3E%3Cpath stroke='%23bbcdf5' d='M8 1h1'/%3E%3Cpath stroke='%23b8cbf6' d='M9 1h1M2 7h1'/%3E%3Cpath stroke='%23b7caf5' d='M10 1h1M2 8h1'/%3E%3Cpath stroke='%23b5c8f7' d='M11 1h1'/%3E%3Cpath stroke='%23b3c7f5' d='M12 1h1'/%3E%3Cpath stroke='%23afc5f4' d='M13 1h1'/%3E%3Cpath stroke='%23dce6f9' d='M14 1h1'/%3E%3Cpath stroke='%23dfe2e1' d='M16 1h1'/%3E%3Cpath stroke='%23e1eafe' d='M3 2h1'/%3E%3Cpath stroke='%23dae6fe' d='M4 2h1M3 3h1'/%3E%3Cpath stroke='%23d4e1fc' d='M5 2h1M3 4h1'/%3E%3Cpath stroke='%23d1e0fd' d='M6 2h1M4 4h1'/%3E%3Cpath stroke='%23d0ddfc' d='M7 2h1M3 5h1'/%3E%3Cpath stroke='%23cedbfd' d='M8 2h1M6 3h1'/%3E%3Cpath stroke='%23cad9fd' d='M9 2h1M7 3h1M5 5h1'/%3E%3Cpath stroke='%23c8d8fb' d='M10 2h1'/%3E%3Cpath stroke='%23c5d6fc' d='M11 2h1m-8 8h3'/%3E%3Cpath stroke='%23c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/%3E%3Cpath stroke='%23bccefa' d='M13 2h1m-1 2h1m-9 9h2'/%3E%3Cpath stroke='%23b9c9f3' d='M14 2h1M5 14h3'/%3E%3Cpath stroke='%23cfd7dd' d='M16 2h1'/%3E%3Cpath stroke='%23d8e3fc' d='M4 3h1'/%3E%3Cpath stroke='%23d1defd' d='M5 3h1'/%3E%3Cpath stroke='%23c9d8fc' d='M8 3h1M6 4h2M6 6h2M3 7h1'/%3E%3Cpath stroke='%23c5d5fc' d='M9 3h1M3 9h3'/%3E%3Cpath stroke='%23c5d3fc' d='M10 3h1'/%3E%3Cpath stroke='%23bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/%3E%3Cpath stroke='%23bccdfa' d='M13 3h1'/%3E%3Cpath stroke='%23baccf4' d='M14 3h1'/%3E%3Cpath stroke='%23bdcbda' d='M16 3h1'/%3E%3Cpath stroke='%23c4d4f7' d='M2 4h1'/%3E%3Cpath stroke='%23cddbfc' d='M5 4h1M3 6h1'/%3E%3Cpath stroke='%23c8d5fb' d='M8 4h1'/%3E%3Cpath stroke='%23bbcefd' d='M10 4h3M9 5h1M8 6h1'/%3E%3Cpath stroke='%23bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c2d5' d='M16 4h1'/%3E%3Cpath stroke='%23bed0f8' d='M2 5h1'/%3E%3Cpath stroke='%23ceddfd' d='M4 5h1'/%3E%3Cpath stroke='%23c8d6fb' d='M6 5h3M3 8h2'/%3E%3Cpath stroke='%23bacdfc' d='M10 5h1m1 0h2M3 12h1'/%3E%3Cpath stroke='%23b9cdfb' d='M11 5h1M9 6h2m1 0h2m-1 1h1'/%3E%3Cpath stroke='%23a8bbd4' d='M16 5h1'/%3E%3Cpath stroke='%23cddafc' d='M4 6h1'/%3E%3Cpath stroke='%234d6185' d='M5 6h1m5 0h1M4 7h3m3 0h3M5 8h3m1 0h3M6 9h5m-4 1h3m-2 1h1'/%3E%3Cpath stroke='%23a4b8d3' d='M16 6h1'/%3E%3Cpath stroke='%23c1d3fb' d='M7 7h2M8 8h1'/%3E%3Cpath stroke='%23b6cefb' d='M9 7h1m2 1h1m-2 1h2'/%3E%3Cpath stroke='%23bacbf4' d='M14 7h1'/%3E%3Cpath stroke='%23a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/%3E%3Cpath stroke='%23b6cdfb' d='M13 8h1m-5 5h1'/%3E%3Cpath stroke='%23b9cbf3' d='M14 8h1'/%3E%3Cpath stroke='%23b4c8f6' d='M2 9h1'/%3E%3Cpath stroke='%23b5cdfa' d='M13 9h1'/%3E%3Cpath stroke='%23b5c9f3' d='M14 9h1'/%3E%3Cpath stroke='%239fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c7f6' d='M2 10h1'/%3E%3Cpath stroke='%23b2cffb' d='M10 10h3m-2 2h1'/%3E%3Cpath stroke='%23b1cbfa' d='M13 10h1'/%3E%3Cpath stroke='%23b3c8f5' d='M14 10h1m-6 4h2'/%3E%3Cpath stroke='%23adc3f6' d='M2 11h1'/%3E%3Cpath stroke='%23c3d3fd' d='M5 11h1'/%3E%3Cpath stroke='%23c2d5fc' d='M6 11h2'/%3E%3Cpath stroke='%23bad4fc' d='M9 11h1'/%3E%3Cpath stroke='%23b7d3fc' d='M10 11h1m-2 1h1'/%3E%3Cpath stroke='%23b3d1fc' d='M11 11h1'/%3E%3Cpath stroke='%23afcefb' d='M12 11h1'/%3E%3Cpath stroke='%23aecafa' d='M13 11h1'/%3E%3Cpath stroke='%23b1c8f3' d='M14 11h1'/%3E%3Cpath stroke='%23acc2f5' d='M2 12h1'/%3E%3Cpath stroke='%23c1d2fb' d='M5 12h1'/%3E%3Cpath stroke='%23bed1fc' d='M6 12h2'/%3E%3Cpath stroke='%23bdd3fb' d='M8 12h1'/%3E%3Cpath stroke='%23b6d1fb' d='M10 12h1'/%3E%3Cpath stroke='%23afccfb' d='M12 12h1'/%3E%3Cpath stroke='%23adc9f9' d='M13 12h1m-2 1h1'/%3E%3Cpath stroke='%23b1c5f3' d='M14 12h1'/%3E%3Cpath stroke='%23aac0f3' d='M2 13h1'/%3E%3Cpath stroke='%23b7cbf9' d='M3 13h1'/%3E%3Cpath stroke='%23b9cefb' d='M4 13h1'/%3E%3Cpath stroke='%23bbcef9' d='M7 13h1'/%3E%3Cpath stroke='%23b9cffb' d='M8 13h1'/%3E%3Cpath stroke='%23b2cdfb' d='M10 13h1'/%3E%3Cpath stroke='%23b0cbf9' d='M11 13h1'/%3E%3Cpath stroke='%23aec8f7' d='M13 13h1'/%3E%3Cpath stroke='%23b0c5f2' d='M14 13h1'/%3E%3Cpath stroke='%23dbe3f8' d='M2 14h1'/%3E%3Cpath stroke='%23b7c6f1' d='M3 14h1'/%3E%3Cpath stroke='%23b8c9f2' d='M4 14h1m3 0h1'/%3E%3Cpath stroke='%23b2c8f4' d='M11 14h1'/%3E%3Cpath stroke='%23b1c6f3' d='M12 14h1'/%3E%3Cpath stroke='%23b0c4f2' d='M13 14h1'/%3E%3Cpath stroke='%23d9e3f6' d='M14 14h1'/%3E%3Cpath stroke='%23aec0d6' d='M16 14h1'/%3E%3Cpath stroke='%23c3d4e7' d='M1 15h1'/%3E%3Cpath stroke='%23aec4e5' d='M15 15h1'/%3E%3Cpath stroke='%23edf1f3' d='M1 16h1'/%3E%3Cpath stroke='%23aac0e1' d='M2 16h1'/%3E%3Cpath stroke='%2394b1d9' d='M3 16h1'/%3E%3Cpath stroke='%2388a7d8' d='M4 16h1'/%3E%3Cpath stroke='%2383a4d3' d='M5 16h1'/%3E%3Cpath stroke='%237da0d4' d='M6 16h1m3 0h3'/%3E%3Cpath stroke='%237e9fd2' d='M7 16h1'/%3E%3Cpath stroke='%237c9fd3' d='M8 16h2'/%3E%3Cpath stroke='%2382a4d6' d='M13 16h1'/%3E%3Cpath stroke='%2394b0dd' d='M14 16h1'/%3E%3Cpath stroke='%23ecf2f7' d='M15 16h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-button:horizontal:start {
  width: 17px;}
    
  </style>
</body>
</html>

Miscellaneous

Shadow inset

#container::-webkit-scrollbar {
      width: 0; /* remove scrollbar space */
      background: transparent; /* to make scrollbar invisible */
    }

#container::-webkit-scrollbar-thumb {
      background: transparent;
    }
  </style>
</body>

Windows 98

#container::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

#container::-webkit-scrollbar-thumb {
      background: transparent;
    }
  </style>
</body>

Expand or change height

<style>

#container {
      overflow: scroll;
      overflow-x:hidden;
      overflow-y:scroll;
      padding: 1rem;
      width: 60%;
      border: 3px double purple;
      transition: width 0.7s ease;
      height: 5em;
    }

#container:hover {
      width: 80%;
      height: 10em;
      background: #fedeee;
    }
  </style>

Gradient Background

<style>

#container {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, #D4E4BC 0%, #CFCFCD 100%);
        /* Visit cssgradient.io (optional) for customizing your gradient background color*/
       
    }
  </style>
</body>

Image Background

Solid Color Background

<body>
  <div id="container">
    <p>Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans.</p>
  </div>

</style>
</body>

Horizontal Scrollbox

.lala {
	    width: 10em;
	    overflow-y:scroll;
	    overflow-x:hidden;
	    border: 1px solid black;
	    white-space: normal;
	    display: inline-block;
	    height: 90%;
	    padding: .3em;
	    vertical-align: middle;
	  }

</style>
	<div id="hoohoo">
	  <div class="lala"> First Column... Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans. </div>
	  <div class="lala">Second Colummn.... Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans. </div>
	  <div class="lala"> Third.... More stuff here </div>
	  <div class="lala"> More</div>
	  <div class="lala"> More stuff here </div>

Jichuwee scrollbox

</style>

<br>

💀.drr.ac scrollbox

<div id="contec">
    <span>FILE 1</span><mark>ABOUT</mark>
       <p><a href="https://web.archive.org/web/20220504173939/https://nao.drr.ac/">Example carrd of mine</a> Cake lemon drops soufflé gingerbread icing gingerbread cheesecake cheesecake. Icing cookie gummies I love I love cotton candy sugar plum. Icing chupa chups danish dragée chocolate bar cookie dessert I love.</p>
    </div>
  </div>
</center>

@font-face {
    font-family: starborn;
    src: url(https://dl.dropbox.com/s/l0541on0m5eqvdj/Starborn.ttf);
  }
  
  @font-face { 
  font-family: "VCr"; 
    src: url(https://cinni.net/fonts/basiic.ttf); 
  }
  
  mark, span {
    font-size:1.3em;
    overflow:none;
    background-color:transparent;
    font-family: starborn;
    font-weight:700;
    color:#fff;
    text-align:center;
    -webkit-text-stroke-width: 1.2px;
    -webkit-text-stroke-color: #0f1315; -webkit-text-fill-color: #fff; position: relative; z-index: 9; display:inline-block; 
  }
  
  #contec p, #contec a {
    text-align: left;
    font-family: "VCr";
    color: #83a1be;
    transition: opacity 1000ms;
  }

#contec:hover{
    overflow-x:hidden;
    overflow-y:scroll;
  }
  
  #contec:hover p, #contec:hover a {
    color: #fff;
    text-align: left;
    font-family: vcr;
    -webkit-animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both;
    animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both
  }
  
  mark{display:none;}
  
  #contec:hover mark  {
    font-weight: 700;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    -webkit-text-fill-color: #a0beac;
    z-index: 9999;
    display: inline;
  }

#contec:hover span{
    display: none;
  }
 
  #contec {
    -webkit-box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
    box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
    border: 2px solid #d3e1d4;
    background: #83a1be;
    border-radius: 7px;
    width:40%;
    height: 70px;
    transition: 0.6s ease;
    padding: 5px;
    cursor: help;
    overflow: scroll;
    overflow-x: hidden;
    display: inline-block;
    transition: transform 1s;
    z-index: 8;
    overflow:hidden;
  }

#contec:hover {
    background: #83a1be;
    z-index: 9999;
    position: relative;
    width: 50%;
    height: 90px;
    transform: translate(12px, 27px) scale(1.8, 1.8);
  }

/* ---------------------------------------------- * 
Generated by Animista on 2022-4-19 11:37:1 * 
Licensed under FreeBSD License. * See http://animista.net/license for more info. *
 w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
  @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0
    }

100% {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1
    }
  }

@keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0
    }

100% {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1
    }
  }
  
  ::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }
</style>

Shake Hover

.imager0 /*image*/ {
    display: block;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    border-radius: 8px;
}

.overlayr0 {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    top: 0;
    background: rgb(255, 229, 251);
    background: radial-gradient(circle, rgba(255, 229, 251, 1) 0%, rgba(255, 148, 190, 1) 50%);
    overflow-x: hidden;
    overflow-y: scroll;
    width: 150px; /* the container width */
    height: 0;
    transition: 0.8s;
    -moz-transition: 0.8s;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
}

.containerr0:hover .overlayr0 {
    animation: shakeit 1s, image_blur 1s;
    transition: all 1s ease-in-out;
    transition-timing-function: cubic-bezier(0.1, 0.8, 0.9, 0.1);
    bottom: 0;
    top: 0;
    height: 150px; /* height of container */
    border: 1px solid black;
    border-radius: 8px;
}

.textr0 {
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
    font-size: .5rem;
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 130px; /* width of scrollable text, make this smaller */
    height: 150px; /* height of scrollable text */
    padding: 10px;
    line-height: 1.2em;
    letter-spacing: -0.05;
}

@keyframes shakeit {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

@-webkit-keyframes image_blur {
    0% {
        -webkit-filter: blur(0px);
    }

50% {
        -webkit-filter: blur(5px);
    }

100% {
        -webkit-filter: blur(0px);
    }
}

@keyframes fadeIn {

0%,
    80% {
        opacity: 0;
    }

100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {

0%,
    80% {
        opacity: 0;
    }

100% {
        opacity: 1;
    }
    
</style>
<div id="containerr0"></div>
<div class="containerr0">
    <img
        src="https://scripted.neocities.org/image.jpg"
        alt="Avatar"
        class="imager0"
        />
    <div class="overlayr0">
        <div class="textr0">
            <center>
                image shake on hover to reveal scrollbox version 2 <br />
                <a href="https://liveweave.com/Rj1zVV">code</a>
                <br />
                Candy gummies macaroon gummi bears marshmallow dragée.
                Croissant jujubes bonbon oat cake dragée sugar plum. Marshmallow
                donut oat cake muffin cheesecake lollipop apple pie apple pie
            </center>
        </div>
    </div>
</div>

Smooth Hover