HTML CSS

<div class="card">
  <img src="/assets/img/screenshots/Uvpmf92p.jpeg" width="1200" height="1200" alt="The outline of a bar of chocolate with a row of vertical wafers." eleventy:ignore="">
  <h2 class="truncate">Chocolate wafer CSS background</h2>
  <p class="description truncate-lines-fadeout">
    This is background image that mimicks chocolate-covered wafers. It can be used
    in a repeating pattern. Extra text to make this description more than 3 lines.
    Anything beyond that is truncated.
  </p>
</div>

.truncate-lines-fadeout {
    --num-of-lines: 3;

    overflow: hidden;
    max-height: calc(var(--num-of-lines) * 1lh);

    /* fade out */
    --fadeout-height: 1lh;
    --fadeout-width: 50%;

    mask-image: linear-gradient(black, black),
      linear-gradient(
        to right,
        hsl(0, 0%, 0%) 0 calc(100% - var(--fadeout-width)),
        hsla(0, 0%, 0%, 0)
      );
    mask-size: 100% calc(100% - var(--fadeout-height)), 100% var(--fadeout-height);
    mask-position: top, bottom;
    mask-repeat: no-repeat;
  }

  /* general styles */
  * {
    box-sizing: border-box;
  }

  body {
    --background-color: hsl(0, 0%, 6%);
    --card-background-color: hsl(0, 0%, 10%);
    --text-color: hsl(0, 0%, 90%);

    min-height: 100dvh;
    margin: 0;
    padding-inline: 0.5rem;

    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;

    background-color: var(--background-color);
    color: var(--text-color);

    display: grid;
    place-items: center;
  }

  /* card styles */
  .card {
    width: 100%;
    max-width: 400px;

    padding: 1rem;
    gap: 1rem;

    display: grid;
    grid-template-rows: auto min-content;

    background-color: var(--card-background-color);

    border-radius: 0.25rem;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.4),
      0 0 4px rgba(255, 255, 255, 0.2);

    img {
      width: 100%;
      max-height: 300px;
      object-fit: cover;

      border-radius: 0.25rem 0.25rem 0 0;
    }

    h2 {
      margin: 0;
      font-size: 1.2rem;
    }
  }