It's my first time posting a question so please excuse me if I am not doing it right. I am trying to create a mask gradient for both the top and bottom of my div. It seems I can only apply one mask gradient at a time. Does anyone know how I can do that?
<div className="inline-flex flex-nowrap gradient-mask-t-80">
<div className="flex flex-col no-scrollbar animate-review-scroll gap-7 w-[360px] ml-7 mt-12 z-0">
<div className="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5 mt-36 ">
<div className="flex flex-row gap-2">
<img src={star} />
<img src={star} />
<img src={star} />
<img src={star} />
<img src={star} />
</div>
<p className="text-taupe_gray text-sm">2 months ago</p>
<p>
Eric is pleasant and timely. He <br />
reached on time, parcel is dry <br />
even thought it's raining heavily. <br />
Tracking number: ZL9T21 Thnx <br />
</p>
<div className="flex flex-row items-center gap-2">
<div className="flex rounded-full bg-[#C1185A] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
J
</div>
<p className="font-bold text-black">Joanna Mohan</p>
</div>
</div>
<div className="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div className="flex flex-row gap-2">
<img src={star} />
<img src={star} />
<img src={star} />
<img src={star} />
<img src={star} />
</div>
<p className="text-taupe_gray text-sm">6 months ago</p>
<p>
Jerand Chua is a very efficient <br />
delivery agent with Uparcel. Not <br />
only fast but also meticulous. He <br />
manage to send my parcels <br />
XYKJZC promptly even thought I <br />
label the boxes wrongly. Well <br />
deserved a 5 star rating. He really <br />
loves his job.
</p>
<div className="flex flex-row items-center gap-2">
<div className="flex rounded-full bg-purple-500 items-center justify-center text-white font-bold w-[30px] h-[30px] ">
P
</div>
<p className="font-bold text-black">Peter Tan</p>
</div>
</div>
<div className="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div className="flex flex-row gap-2">
<img src={star} />
<img src={star} />
<img src={star} />
<img src={star} />
<img src={star} />
</div>
<p className="text-taupe_gray text-sm">4 months ago</p>
<p>
Mr. Liu JunKang delivered my <br />
durian speedily after picking up <br />
the order. My durian still in tip top <br />
condition upon receiving. <br />
Appreciate for his great service.
</p>
<div className="flex flex-row items-center gap-2">
<div className="flex rounded-full bg-[#5B6BC0] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
A
</div>
<p className="font-bold text-black">Agnes Mah</p>
</div>
</div>
<div className="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div className="flex flex-row gap-2">
<img src={star} />
<img src={star} />
<img src={star} />
<img src={star} />
<img src={star} />
</div>
<p className="text-taupe_gray text-sm">4 months ago</p>
<p>
Tracking ZTKVAK, fast delivery. <br />
My med from white coat came less <br />
than 3 hours after consultation. <br />
Thank you
</p>
<div className="flex flex-row items-center gap-2">
<div className="flex rounded-full bg-[#502DA7] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
A
</div>
<p className="font-bold text-black">Ang Siaw She</p>
</div>
</div>
</div>
</div>
I am not sure if there are other libraries that can help me with it. But I downloaded the gradient-mask plugin using NPM
You haven't specified what the bottom gradient mask should be like, so I'll use a symmetrical version of the top mask as the bottom one.
You could consider using an arbitrary property class to apply a custom mask-image value:
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<div class="inline-flex flex-nowrap [mask-image:linear-gradient(0deg,transparent_0%,#000_20%,#000_80%,transparent_100%)]">
<div class="flex flex-col no-scrollbar animate-review-scroll gap-7 w-[360px] ml-7 mt-12 z-0">
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5 mt-36 ">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">2 months ago</p>
<p>
Eric is pleasant and timely. He <br />
reached on time, parcel is dry <br />
even thought it's raining heavily. <br />
Tracking number: ZL9T21 Thnx <br />
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-[#C1185A] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
J
</div>
<p class="font-bold text-black">Joanna Mohan</p>
</div>
</div>
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">6 months ago</p>
<p>
Jerand Chua is a very efficient <br />
delivery agent with Uparcel. Not <br />
only fast but also meticulous. He <br />
manage to send my parcels <br />
XYKJZC promptly even thought I <br />
label the boxes wrongly. Well <br />
deserved a 5 star rating. He really <br />
loves his job.
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-purple-500 items-center justify-center text-white font-bold w-[30px] h-[30px] ">
P
</div>
<p class="font-bold text-black">Peter Tan</p>
</div>
</div>
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">4 months ago</p>
<p>
Mr. Liu JunKang delivered my <br />
durian speedily after picking up <br />
the order. My durian still in tip top <br />
condition upon receiving. <br />
Appreciate for his great service.
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-[#5B6BC0] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
A
</div>
<p class="font-bold text-black">Agnes Mah</p>
</div>
</div>
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">4 months ago</p>
<p>
Tracking ZTKVAK, fast delivery. <br />
My med from white coat came less <br />
than 3 hours after consultation. <br />
Thank you
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-[#502DA7] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
A
</div>
<p class="font-bold text-black">Ang Siaw She</p>
</div>
</div>
</div>
</div>You could also consider using "vanilla" CSS:
.foo {
mask-image: linear-gradient(0deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<div class="inline-flex flex-nowrap foo">
<div class="flex flex-col no-scrollbar animate-review-scroll gap-7 w-[360px] ml-7 mt-12 z-0">
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5 mt-36 ">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">2 months ago</p>
<p>
Eric is pleasant and timely. He <br />
reached on time, parcel is dry <br />
even thought it's raining heavily. <br />
Tracking number: ZL9T21 Thnx <br />
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-[#C1185A] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
J
</div>
<p class="font-bold text-black">Joanna Mohan</p>
</div>
</div>
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">6 months ago</p>
<p>
Jerand Chua is a very efficient <br />
delivery agent with Uparcel. Not <br />
only fast but also meticulous. He <br />
manage to send my parcels <br />
XYKJZC promptly even thought I <br />
label the boxes wrongly. Well <br />
deserved a 5 star rating. He really <br />
loves his job.
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-purple-500 items-center justify-center text-white font-bold w-[30px] h-[30px] ">
P
</div>
<p class="font-bold text-black">Peter Tan</p>
</div>
</div>
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">4 months ago</p>
<p>
Mr. Liu JunKang delivered my <br />
durian speedily after picking up <br />
the order. My durian still in tip top <br />
condition upon receiving. <br />
Appreciate for his great service.
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-[#5B6BC0] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
A
</div>
<p class="font-bold text-black">Agnes Mah</p>
</div>
</div>
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">4 months ago</p>
<p>
Tracking ZTKVAK, fast delivery. <br />
My med from white coat came less <br />
than 3 hours after consultation. <br />
Thank you
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-[#502DA7] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
A
</div>
<p class="font-bold text-black">Ang Siaw She</p>
</div>
</div>
</div>
</div>You could also consider using a Tailwind plugin in many different ways. Here's a simple example of the aforementioned CSS as a static utility class:
tailwind.config = {
plugins: [
tailwind.plugin(({ addUtilities }) => {
addUtilities({
'.foo': {
maskImage: 'linear-gradient(0deg, transparent 0%, #000 20%, #000 80%, transparent 100%)',
}
});
}),
],
};<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<div class="inline-flex flex-nowrap foo">
<div class="flex flex-col no-scrollbar animate-review-scroll gap-7 w-[360px] ml-7 mt-12 z-0">
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5 mt-36 ">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">2 months ago</p>
<p>
Eric is pleasant and timely. He <br />
reached on time, parcel is dry <br />
even thought it's raining heavily. <br />
Tracking number: ZL9T21 Thnx <br />
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-[#C1185A] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
J
</div>
<p class="font-bold text-black">Joanna Mohan</p>
</div>
</div>
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">6 months ago</p>
<p>
Jerand Chua is a very efficient <br />
delivery agent with Uparcel. Not <br />
only fast but also meticulous. He <br />
manage to send my parcels <br />
XYKJZC promptly even thought I <br />
label the boxes wrongly. Well <br />
deserved a 5 star rating. He really <br />
loves his job.
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-purple-500 items-center justify-center text-white font-bold w-[30px] h-[30px] ">
P
</div>
<p class="font-bold text-black">Peter Tan</p>
</div>
</div>
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">4 months ago</p>
<p>
Mr. Liu JunKang delivered my <br />
durian speedily after picking up <br />
the order. My durian still in tip top <br />
condition upon receiving. <br />
Appreciate for his great service.
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-[#5B6BC0] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
A
</div>
<p class="font-bold text-black">Agnes Mah</p>
</div>
</div>
<div class="flex flex-col bg-white rounded-xl font-inter gap-2 p-5 mx-5">
<div class="flex flex-row gap-2">
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
<img src="https://picsum.photos/16/16" />
</div>
<p class="text-taupe_gray text-sm">4 months ago</p>
<p>
Tracking ZTKVAK, fast delivery. <br />
My med from white coat came less <br />
than 3 hours after consultation. <br />
Thank you
</p>
<div class="flex flex-row items-center gap-2">
<div class="flex rounded-full bg-[#502DA7] items-center justify-center text-white font-bold w-[30px] h-[30px] ">
A
</div>
<p class="font-bold text-black">Ang Siaw She</p>
</div>
</div>
</div>
</div>