HTML/CSS: How to fade the left and right edges of a div?

Question

Problem Statement:

Hi, I want to fade out the div and it's contents from the left and right edge using pure CSS. Currently I'm able to achieve this based on an answer to a question on stack overflow.

Code:

   .container {
      height: 234px;
      width: 234px;
      overflow: scroll;

      mask-image: linear-gradient(transparent,
          black 20%,
          black 80%,
          transparent 100%);
      -webkit-mask-image: linear-gradient(transparent,
          black 20%,
          black 80%,
          transparent 100%);
    }

    .container::-webkit-scrollbar {
      display: none;
    }

  <div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Impedit dolorem libero, dolor,
      fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat!
      Dicta eius repellendus totam qui maiores odio a! Lorem ipsum
      dolor sit amet consectetur adipisicing elit. Impedit dolorem
      libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore
      autem fugiat! Dicta eius repellendus totam qui maiores odio a!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a!
    </p>
  </div>

How can I do make the linear gradient make left and right edges fade instead of top and bottom?

Also: This syntax is pretty neat but I fail to understand that how the args passed to linear-gradient are able to specify to fade the container only from top and bottom, and leave the rest as it is. In short, we have not specified any directions something like to-top and to-bottom so how's this actually working?

NOTE: I know this question is a duplicate of this. But the answer specified on the question does not solve my use case, as it's not fading out the inner content of the div.

Thanks! :)

Answer 1

The default of linear gradients run from top to bottom. So, you need to use to left or to right with transparent. To make it more clear you have to reduce transparency. The transition is made between two-color or more which creates a band of colors that progress in a straight line. See here.

.container {
      height: 234px;
      width: 234px;
      overflow: scroll;

      mask-image: linear-gradient(transparent,
          black 20%,
          black 80%,
          transparent 100%);
      -webkit-mask-image: linear-gradient( to right,transparent,
          black 20%,
          black 80%,
          transparent 100%);
          
    }

    .container::-webkit-scrollbar {
      display: none;
    }


 

<div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Impedit dolorem libero, dolor,
      fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat!
      Dicta eius repellendus totam qui maiores odio a! Lorem ipsum
      dolor sit amet consectetur adipisicing elit. Impedit dolorem
      libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore
      autem fugiat! Dicta eius repellendus totam qui maiores odio a!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a!
    </p>
  </div>

Answer 2

here is the code. I put justify so you can see it better. Here is the example

  .container {
  width: 234px;
  text-align: justify;
  mask-image: linear-gradient(to left, transparent, black 40%, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, transparent, black 40%, black 60%, transparent 100%);

<div class="container">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo
    nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem
    fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores
    odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a!
  </p>
</div>

If you need less strong version of the fade:

<style>
.container {
    width: 234px;
    text-align: justify;
    mask-image: linear-gradient(to left,#00000030, black 20%, black 80%, #00000030 100%);
    -webkit-mask-image: linear-gradient(to left,#00000030, black 20%, black 80%, #00000030 100%);
    }
</style>