HTML CSS

<figure>
  <div class="box"></div>
  <figcaption>
    Box 1: A box with a mask that uses a linear gradient with hard stop positions.
    It cuts off the bottom 10% of the element.
  </figcaption>
</figure>

<figure>
  <div class="box"></div>
  <figcaption>
    Box 2: A box with a mask that uses a linear gradient without a final stop
    position. It tapers off the bottom 10% of the element.
  </figcaption>
</figure>

/* box 1 */
  figure:first-child .box {
    mask-image: linear-gradient(black 90%, transparent 90%);
  }

  /* box 2 */
  figure:last-child .box {
    mask-image: linear-gradient(black 90%, transparent);
  }

  * {
    box-sizing: border-box;
  }

  body {
    width: 100dvw;
    height: 100dvh;
    margin: 0;

    display: grid;
    place-items: center;

    background: linear-gradient(153.58deg, #f7bdf8 32.25%, #2f3cc0 92.68%);
  }

  .box {
    width: 120px;
    aspect-ratio: 1 / 1;

    border: 0.25rem solid red;
  }

  figure {
    height: fit-content;

    display: grid;
    justify-items: center;
    gap: 1rem;

    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size: 0.9rem;

    figcaption {
      max-width: 40ch;
    }
  }

  code {
    font-size: 0.8rem;
  }