common/static/common/styles/_box.sass

@@ -1,5 +1,6 @@
 .box-outline
   @extend .box
+
   background-color: transparent
   border: var(--border-width) solid var(--border-color)
   box-shadow: none
@@ -7,3 +8,10 @@
 .box
   &.is-flatpage
     +style-rich-text
+
+.box-filter-sort
+  .box-filter-sort-end
+    background: linear-gradient(270deg, rgba(48, 53, 69, 1) 0%, rgba(0, 0, 0, 0) 100%) // --box-bg-color
+
+  .box-filter-sort-start
+    background: linear-gradient(90deg, rgba(48, 53, 69, 1) 0%, rgba(0, 0, 0, 0) 100%) // --box-bg-color

extensions/templates/extensions/list.html

@@ -46,8 +46,9 @@
     {% if tags %}
       <div class="mb-3 row">
         <div class="col-md-12">
-          <div class="box p-2">
-            <div class="btn-row">
+          <div class="box box-filter-sort overflow-hidden p-2">
+            <div class="box-filter-sort-start h-100 position-absolute start-0 top-0 w-5 z-1"></div>
+            <div class="btn-row flex-nowrap overflow-x-auto">
               {# TODO: @back-end add conditional link to either Add-ons or Themes pages #}
               <a class="align-items-center btn btn-sm d-flex {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
                 <div>
@@ -69,6 +70,7 @@
                 </a>
               {% endfor %}
             </div>
+            <div class="box-filter-sort-end end-0 h-100 position-absolute top-0 w-5"></div>
           </div>
         </div>
       </div>