• 2021-02-01

    Fade out overflow text


    Start a discussion

    The trick is to place a ::before element with a gradient above the bottom text.

    To be able to select the text below the overlay you can use pointer-events: none;.


    <div class="text">
    Muffin jelly tiramisu. Jelly beans chocolate cake jelly beans jelly pastry carrot cake sugar plum chocolate bar. Sugar plum macaroon topping candy canes cupcake. Cupcake powder candy canes lollipop danish cake donut sesame snaps gingerbread.


    .text {
      width: 200px;
      height: 6rem;
      overflow: hidden;
      position: relative;
    .text:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3rem;
      width: 100%;
      background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      pointer-events: none;


    You saw it first on CSSPoo.