title: How do I blur the right and left sides of a scroll container?
body: <p>I am trying to make the left and right sides of the container have a blur effect using the <code>box-shadow</code> property. The container (<code>boxes</code>) contains what boxes are currently in view as there are multiple boxes in that container that can be scrolled through using 2 buttons (with ids <code>backwards</code> and <code>forwards</code>.</p>
  <p>How do I add a fading blur effect to the edges of the container? The far edges shouldn't be visible and then it should gradually get lighter.</p>
  <p>Example:</p>
  <p><a href="https://i.stack.imgur.com/fdj3S.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fdj3S.jpg" alt="Example" /></a></p>
  <p>vs mine:</p>
  <p><a href="https://i.stack.imgur.com/gv6v3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gv6v3.jpg" alt="mine" /></a></p>
  <p>html:</p>
  <pre><code>&lt;div class=&quot;boxes-container&quot;&gt;
      &lt;div class=&quot;boxes&quot;&gt;
          &lt;!-- box 1 --&gt;
          &lt;div class=&quot;box&quot;&gt;
              &lt;div class=&quot;img-container&quot;&gt;
                  &lt;img src=&quot;https://a0.muscache.com/pictures/b6005f78-45e6-403a-bc1d-3351ae83d149.jpg&quot; alt=&quot;&quot;&gt;
              &lt;/div&gt;
              &lt;h6&gt;Why host on Airbnb?&lt;/h6&gt;
              &lt;p&gt;Hosts reveal what they love about sharing their space on Airbnb.&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- box 2 --&gt;
          &lt;div class=&quot;box&quot;&gt;
              &lt;div class=&quot;img-container&quot;&gt;
                  &lt;img src=&quot;https://a0.muscache.com/pictures/9ac19f4a-a59c-47f9-8223-09120b52cd2d.jpg&quot; alt=&quot;&quot;&gt;
              &lt;/div&gt;
              &lt;h6&gt;How to get started on Airbnb&lt;/h6&gt;
              &lt;p&gt;From creating your listing to prepping your space, learn how to start hosting.&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- box 3 --&gt;
          &lt;div class=&quot;box&quot;&gt;
              &lt;div class=&quot;img-container&quot;&gt;
                  &lt;img src=&quot;https://a0.muscache.com/pictures/4d0cc0ed-ad85-4efd-b98e-386d22ab195a.jpg&quot; alt=&quot;&quot;&gt;
              &lt;/div&gt;
              &lt;h6&gt;How to earn money on Airbnb&lt;/h6&gt;
              &lt;p&gt;Here's what every Host needs to know about pricing and payouts.&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- box 4 --&gt;
          &lt;div class=&quot;box&quot;&gt;
              &lt;div class=&quot;img-container&quot;&gt;
                  &lt;img src=&quot;https://a0.muscache.com/pictures/4efaca33-ca90-4d94-a79b-381cf0179355.jpg&quot; alt=&quot;&quot;&gt;
              &lt;/div&gt;
              &lt;h6&gt;Designing your space&lt;/h6&gt;
              &lt;p&gt;Designing your space for guests can be a quick way to boost your bookings.&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- box 5 --&gt;
          &lt;div class=&quot;box&quot; id=&quot;last-box&quot;&gt;
              &lt;div class=&quot;img-container&quot;&gt;
                  &lt;img src=&quot;https://a0.muscache.com/pictures/3cea79b0-79c3-4604-8fd9-7ef5cee4aa42.jpg&quot; alt=&quot;&quot;&gt;
              &lt;/div&gt;
              &lt;h6&gt;Secrets from a seasoned Superhost&lt;/h6&gt;
              &lt;p&gt;Superhost Nikki shares her tips, from setting up to standing out.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>css:</p>
  <pre><code>.boxes-container {
      margin-top: 2rem;
      width: 100%;
      position: relative;
  }
  
  .boxes {
      display: flex;
      overflow-x: scroll;
      -ms-overflow-style: none;
      scrollbar-width: none;
      scroll-behavior: smooth;
      // border: 2px solid red;
      position: relative;
  
      &amp;::before, &amp;::after {
          content: '';
          position: absolute;
          top: 0;
          width: 2rem;
          height: 100%;
      }
  
      &amp;::before {
          box-shadow: 50px 0 50px #fff inset;
          left: 0;
      }
  
      &amp;::after {
          box-shadow: -50px 0 50px #fff inset;
          // box-shadow: -80px 0 #fff inset;
          right: 0;
      }
      
      &amp;::-webkit-scrollbar {display: none}
  
      .box {
          @include flexCenter(column);
          align-items: flex-start;
          gap: 1rem;
          width: 332px;
          max-width: 332px;
          cursor: pointer;
          margin-right: 2rem;
          // background-color: green;
  
          &amp;#last-box {
              padding-right: 2rem;
          }
  
          .img-container {
              
              img {
                  width: 322px;
                  max-width: 322px;
                  height: 200px;
                  object-fit: cover;
                  border-radius: 10px;
              }
          }
  
          h6 {
              font-size: 18px;
          }
  
          p {
              font-size: 14.5px;
              font-weight: lighter;
              letter-spacing: 0.1px;
          }
      }
  }
  </code></pre>