How to make the gap not covered by the gradient. Or maybe there are some other ways to achieve this result?
javascript
Ethan JacksonI'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>