Before we start, let's quickly illustrate what we are talking about. Yes, this is what you see below. A simple shadow effect 🙂. (It's more complex than what it looks like - keep reading).
Adding Elegant Shadows with React to Invite Users to Scroll
By keeping your content in a box with a reasonably small height, you risk keeping hidden a part of your content. Users may not know that they can scroll down. How do you make sure they don't miss anything? At Qovery, we love to find elegant and subtle designs that encourage users to better use our product. In this article, I will explain how I added a Shadow effect to invite our users to scroll down content. Let's go!
Benjamin Chastanier
Staff Engineer
DEC 25, 2022 · 6 MIN
Qovery · Kubernetes for the AI era
Build with Claude Code, Deploy with Qovery
Learn more
The thing is that adding this shadow can be a little bit tricky because you want it to be here at the beginning. Then if you scroll, you want to have it on top and bottom. And if you reach the bottom, you want to hide the bottom shadow.
After implementing it the first time with a bad developer experience on our v2, we have decided to redo it from scratch on our React v3.
In this article, you will learn how to do it and what we added to the common implementation you usually find everywhere on google.
A First Glimpse Into the Developer Experience
At the end of this article, you should have been able to use this component as quickly as this:
- Your
- Very
- long
- long
- long
- long
- long
- long
- long
- long
- content
You have to wrap your content with the "
Agents ship fast. Guardrails keep them safe.
Qovery ensures every agent action is scoped, audited, and policy-checked. Start deploying in under 10 minutes.
What our Implementation Improves Compared to the One we Found Anywhere Else
Shout out to Marius Ibsen, that created a pretty elegant way to detect when we need the top and the bottom shadow. He documented that in his medium article.
The problem with his implementation is not in the detection but in the shadow itself. His shadows are done with "box-shadow inset", and the problem with the box shadows is that they are pretty ugly, and you don’t have any control over them.
So instead of using a hook as he does, we use a WrapperComponent to embed all the improvements we want. And our improvements are on the count of 2.
One is about the shadows, but another, which we will cover a little bit later, provides an auto re-computation of the shadow presence when the content evolves. If the content gets bigger for any reason (async loading, filtering, …), the shadow presence must be re-asserted.
Our Own Beautiful Shadows
To implement the shadows, we used two div that stick to the top and the bottom of the wrapper with the "sticky" CSS property.
ref={wrapperRef}
style={style}
className={`relative overflow-auto ${className}`}
onScroll={onScrollHandler}
>
{/* SHADOW TOP */}
className={`sticky top-0 bg-scroll-shadow-up w-full h-4 -mb-4 transition-opacity duration-300 ${
getVisibleSides().top ? 'opacity-100' : 'opacity-0'
}`}
/>
{children}
{/* SHADOW BOTTOM */}
className={`sticky bottom-0 bg-scroll-shadow-bottom w-full h-4 -mt-4 rotate-180 transition-opacity duration-300 ${
getVisibleSides().bottom ? 'opacity-100' : 'opacity-0'
}`}
/>
About the author
Benjamin Chastanier
Benjamin is a staff engineer at Qovery focused on infrastructure automation, Kubernetes internals, and building the deployment engine that powers thousands of clusters.
Next step
Agents ship fast. Guardrails keep them safe.
Qovery ensures every agent action is scoped, audited, and policy-checked. Start deploying in under 10 minutes.
Continue reading
More articles
539 · Cloud Migration5 min
[Alan] From nginx to Envoy: What Actually Happens When You Swap Your Proxy in Production
William OccelliApr 28, 2026
533 · AI3 min
Qovery Skill for AI Agents: Deploy Apps in One Prompt
Romaric PhilogeneApr 19, 2026
522 · Engineering10 min
Everything you need to know about Kubernetes autoscaling at fleet scale
Qovery TeamMar 30, 2026