diff --git a/index.html b/index.html
index 623738b5c..c638e8e48 100644
--- a/index.html
+++ b/index.html
@@ -1333,4 +1333,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
     </div>
     <footer class="footer"></footer>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/snippets/custom-scrollbar.md b/snippets/custom-scrollbar.md
new file mode 100644
index 000000000..b63cc00ae
--- /dev/null
+++ b/snippets/custom-scrollbar.md
@@ -0,0 +1,82 @@
+### Custom scrollbar
+
+Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
+
+#### HTML
+
+```html
+<div class="custom-scrollbar">
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
+</div>
+```
+
+#### CSS
+
+```css
+/* Document scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+}
+
+/* Scrollable element */
+.some-element::webkit-scrollbar {
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <div class="snippet-demo__custom-scrollbar">
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
+    </p>
+  </div>
+</div>
+
+<style>
+.snippet-demo__custom-scrollbar {
+  height: 100px;
+  overflow: auto;
+}
+
+.snippet-demo__custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.snippet-demo__custom-scrollbar::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+
+.snippet-demo__custom-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}
+</style>
+
+#### Explanation
+
+1. `::-webkit-scrollbar` targets the whole scrollbar element.
+2. `::-webkit-scrollbar-track` targets only the scrollbar track.
+3. `::-webkit-scrollbar-thumb` targets the scrollbar thumb.
+
+There are many other pseudo-elements that you can use to style scrollbars. For more info, visit the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/)
+
+#### Browser support
+
+<span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span>
+
+* https://caniuse.com/#feat=css-scrollbar