How to make the gap not covered by the gradient. Or maybe there are some other ways to achieve this result?

I'm trying to apply a single background gradient to a grid of cards (statistic blocks) in React using Tailwind CSS. The goal is to have the gradient visible only on the cards, while the gaps between them remain transparent.

What I need: enter image description here

What I have: enter image description here

My code

<section className="container-base m-section">
      <Title title="By the numbers" />
      <div className="relative grid grid-cols-5 grid-rows-2 gap-4 h-[500px] mt-8 bg:[#181413] before:absolute before:inset-0 before:bg-gradient-to-b before:bg-[linear-gradient(135deg,_#ffdd55,_#ff55cc,_#88f,_#55ffff)] before:rounded-xl">
        {statisticData.map((item, index) => (
          <StatisticBlock
            className="z-10 "
            key={index}
            title={item.title}
            subtitle={item.subtitle}
            col={item.col}
            row={item.row}
          />
        ))}
      </div>
    </section>

StatisticBlock:

<div
      className={clsx(
        className,
        "flex flex-col items-center justify-center p-4 rounded-xl text-black text-center",
        col === 2 && "col-span-2",
        col === 3 && "col-span-3",
        row === 2 && "row-span-2",
        row === 3 && "row-span-3"
      )}
    >
      <div className="text-6xl leading-20 font-bold">{title}</div>
      <p className="text-2xl leading-6 font-bold">{subtitle}</p>
    </div>

Answer

You can use background image and background position (and background size) to make the effect. You could calculate all the values using JS but I will just setup a demo manually.

.cards-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 210px;
  height: 210px;
  background: black;
  padding: 10px;
}

.cards-container .card {
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  box-sizing: border-box;
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #ffdd55, #ff55cc, #88f, #55ffff);
  background-size: 210px 210px;
}

.cards-container .card.a {
  background-position: 0 0;
}

.cards-container .card.b {
  background-position: 100px 0;
}

.cards-container .card.c {
  background-position: 0 100px;
}

.cards-container .card.d {
  background-position: 100px 100px;
}

<div class="cards-container">

  <div class="card a">Card A</div>
  <div class="card b">Card B</div>
  <div class="card c">Card C</div>
  <div class="card d">Card D</div>

</div>