Ombre color shift grid

𝗕𝘃𝗹𝗴𝗮𝗿𝗶's PLP tiles use CSS gradient overlay for a luxe scroll experience 💎 if you try this, keep 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 and 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 in mind:

🎞️ 𝗙𝗿𝗮𝗺𝗲–𝗿𝗮𝘁𝗲 𝗶𝘀𝘀𝘂𝗲𝘀:

If using JS scroll listeners, make sure they're debounced or optimized (e.g. with IntersectionObserver) or they can cause jank and lag, especially on mobile

🎨 𝗥𝗲𝗽𝗮𝗶𝗻𝘁𝘀 & 𝗖𝗦𝗦 𝗲𝗳𝗳𝗲𝗰𝘁𝘀:

Using mix-blend-mode, large gradient overlays or changing styles per frame can trigger repaints that can be costly and add up across many tiles in a long product list

You may want to reserve this effect for smaller, themed lists or grid sections within a landing page (a few rows at a time, separated with banner images)

🏋️‍♀️ 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲 𝗹𝗼𝗮𝗱:

Extra CSS, JS (for viewport scroll detection) and paint/tick cost increases the bundle size and memory footprint

You can reduce or eliminate JS with CSS scroll‑linked animations (view transitions, @scroll-timeline or scroll-snap) although this is not supported by all browsers (yet)

🦾 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆:

Users with motion sensitivities or low-contrast needs may be affected. Ensure you degrade gracefully or offer a “reduced motion” mode

It is challenging to choose background colors that contrast with all product images - you may want to try it on specific themed collection pages where you have precise merchandising control over which products are included