CSS shadow play – Scroll shadows with “animation-timeline”
“Whoever wants a beautiful shadow must not focus on the shadow, but on the body. If the shadow is right, it is because the form is right.”
from “Master Lü’s Spring and Autumn Annals“
Scroll shadows are a neat trick in UX design to indicate that there is more content lying beyond the edge of a container. While native scroll bars serve the same purpose, they can sometimes look rather subtle, depending on the device and browser.
You might have found your way here because you were trying to implement CSS scroll shadows, but ran into the problem of the content covering the effect. I have come up with a new solution using the CSS property animation-timeline – and I am glad to share it with you in this article.
⚠️
At the time of publication of this article, animation-timeline is only available in Chromium-based browsers such as Google Chrome, Microsoft Edge or Opera. See: https://caniuse.com/mdn-css_properties_animation-timeline
Fortunately, scroll shadows are mainly an aesthetic improvement and not an essential function. We can look forward to a future in which all browsers can display this cool trick.
Shadows that reveal, not conceal
A common CSS trick allows us to add scroll shadows to containers. They fade out when you scroll to the end of the container, in both directions. This helps to indicate that the end of the content has also been reached.
Full CSS code
@media ( prefers-reduced-motion: no-preference ) {
.scroll-container {
--white: #fff;
--black: #000;
--scroll-shadow-size: 1rem;
background:
/* Gradient 1:
- White
- On top of the stack
- Sticks to the top of the container */
linear-gradient(
180deg,
var( --white ) var( --scroll-shadow-size ),
transparent
) center top,
/* Gradient 2:
- White
- Second place on the stack
- Sticks to the bottom of the container */
linear-gradient(
0deg,
var( --white ) var( --scroll-shadow-size ),
transparent
) center bottom,
/* Gradient 3:
- Black
- Lower on the stack
- Sticks to the top and scrolls with the viewport */
linear-gradient(
180deg,
color-mix( in srgb, var( --black ), transparent 50% ),
transparent
) center top,
/* Gradient 4:
- Black
- Lower on the stack
- Sticks to the bottom and scrolls with the viewport */
linear-gradient(
0deg,
color-mix( in srgb, var( --black ), transparent 50% ),
transparent
) center bottom,
/* Background 5:
Regular white background for full container */
var(--white);
background-size:
100% calc( 2 * var( --scroll-shadow-size ) ),
100% calc( 2 * var( --scroll-shadow-size ) ),
100% var( --scroll-shadow-size ),
100% var( --scroll-shadow-size );
background-attachment: local, local, scroll, scroll;
}
}Code language: CSS (css)With all the techniques I am going to show you, I will always check for prefers-reduced-motion. We do not want to show the animated shadows if someone has turned off animations and effects in their browser.
🎨
In the CSS snippets, I have generally broken down the code to the lines that are necessary to demonstrate the principles. The embedded examples contain additional styles – like paddings, margins and other effects – just to make them a little prettier.
Behind the curtain
I did not come up with this trick myself – you will find it quite a lot on the internet. The idea is clever: we set the rarely used CSS property background-attachment for four separate background gradients. Two will follow the scroll movement, while the two others remain fixed at the ends of the container.
--white: #0f0;
--black: #f00;Code language: CSS (css)In this example, I highlighted the moving gradients in red and the fixed ones in green. Because the fixed gradients are declared later, they lie “behind” the moving ones and get covered by them once you reach the container’s ends.
The trouble comes with backgrounds
This works fine – until the scroll container contains elements with backgrounds or also images. These will overlay the gradients and break the effect.
A new solution thanks to “animation-timeline”
Full CSS code
@keyframes scroll-indicator {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
100% {
/* `animation-fill-mode` does not work here, so we have to define the end state. */
opacity: 1;
}
}
@media ( prefers-reduced-motion: no-preference ) {
@supports ( ( animation-timeline: scroll() ) ) {
.scroll-container {
--scroll-indicator-size: 1rem;
position: relative;
scroll-timeline-name: --scroll-timeline;
scroll-timeline-axis: block;
&::before,
&::after {
content: "";
position: sticky;
display: block;
width: 100%;
height: var( --scroll-shadow-size );
opacity: 0;
pointer-events: none;
animation-name: scroll-indicator;
animation-timeline: --scroll-timeline;
}
&::before {
top: 0;
background:
linear-gradient(
180deg,
color-mix( in srgb, var( --black ), transparent 50% ),
transparent
);
}
&::after {
animation-direction: reverse;
bottom: 0;
background:
linear-gradient(
0deg,
color-mix( in srgb, var( --black ), transparent 50% ),
transparent
);
}
}
}
}Code language: CSS (css)Time for our actual trick: With the property animation-timeline we can define timelines for CSS animations to follow. This is often combined with scroll-timeline to link the animations to the users’ scrolling behaviour.
🖱️
Want to learn more about “scroll-driven animations”? Check out the demo page that we prepared with some examples and explanations.
scroll-timeline-name: --scroll-timeline;
scroll-timeline-axis: block;Code language: HTTP (http)In these lines, we define a custom timeline called --scroll-timeline for the scroll container. The property scroll-timeline-axis: block specifies that this new timeline should be aligned with the “block” axis (the vertical y-axis for most languages).
animation-name: scroll-indicator;
animation-timeline: --scroll-timeline;Code language: CSS (css)The scroll shadows are set on the two ::before and ::after pseudo-elements, which are attached to the top and bottom of the scroll container using position: sticky. We assign an animation to them called scroll-indicator, controlled by the animation timeline we just defined as --scroll-timeline.
@keyframes scroll-indicator {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
100% {
/* `animation-fill-mode` does not work here, so we have to define the end state. */
opacity: 1;
}
}Code language: CSS (css)The animation does nothing more than to show and hide the pseudo-elements. At 0% scroll progress they will have 0% opacity – being invisible – and at 100% scroll progress they will also have 100% opacity so you can see them again. That’s all there is to it.
Because we do not want both scroll shadows to disappear at the same time, the bottom shadow on the ::after pseudo-element is given the property animation-direction: reverse. And since we also do not want the shadows to obstruct interactions with the content, we assign them pointer-events: none.
💡
With regular, time-based animations, animation-fill-mode: both would ensure that the animation retains its final state after it has finished. This does not seem to work with animation-timeline animations, so we need to define the 100% state explicitly …
Taking a horizontal look
Of course, you can apply the same effect to horizontal scroll containers. In the following example, I use the “old” method again with background-attachment.
Full CSS code
@media ( prefers-reduced-motion: no-preference ) {
.scroll-container {
background:
linear-gradient(
90deg, /* Rotated to be vertical */
var( --white ) var( --scroll-shadow-size ),
transparent
) center left, /* `left` instead of `top` */
linear-gradient(
-90deg, /* Rotated to be vertical */
var( --white ) var( --scroll-shadow-size ),
transparent
) center right, /* `right` instead of `bottom` */
linear-gradient(
90deg, /* Rotated to be vertical */
color-mix( in srgb, var( --black ), transparent 50% ),
transparent
) center left, /* `left` instead of `top` */
linear-gradient(
-90deg, /* Rotated to be vertical */
color-mix( in srgb, var( --black ), transparent 50% ),
transparent
) center right, /* `right` instead of `bottom` */
var(--white);
background-size:
/* Switched widths and heights */
calc( 2 * var( --scroll-shadow-size ) ) 100%,
calc( 2 * var( --scroll-shadow-size ) ) 100%,
var( --scroll-shadow-size ) 100%,
var( --scroll-shadow-size ) 100%;
background-attachment: local, local, scroll, scroll;
background-repeat: no-repeat;
}
}
Code language: CSS (css)And naturally, as soon as we add content with backgrounds, we run into our familiar problem once more.
To infinity – and beyond?
No need to worry – our new method using animation-timeline will also work for horizontal scroll containers. To accomplish this, we simply have to change scroll-timeline-axis from block to inline.
Full CSS code
@media ( prefers-reduced-motion: no-preference ) {
@supports ( ( animation-timeline: scroll() ) ) {
.scroll-container {
--scroll-indicator-size: 1rem;
position: relative;
overflow-y: clip; /* This is new! */
scroll-timeline-name: --scroll-timeline;
scroll-timeline-axis: inline;
&::before,
&::after {
content: "";
position: sticky;
display: block;
width: var( --scroll-shadow-size ); /* `width` instead of `height` */
height: calc( infinity * 1px ); /* This is where it gets wild … */
opacity: 0;
pointer-events: none;
animation-name: scroll-indicator;
animation-timeline: --scroll-timeline;
}
&::before {
left: 0; /* `left` instead of `top` */'
margin-block-end: calc( -infinity * 1px ); /* I'll explain in just a minute … */
background:
linear-gradient(
90deg, /* Rotated to be vertical */
color-mix( in srgb, var( --black ), transparent 50% ),
transparent
);
}
&::after {
animation-direction: reverse;
left: calc( 100% - var( --scroll-shadow-size ) ); /* Instead of `bottom: 0` */
margin-block-start: calc( -infinity * 1px ); /* Trust me!!! */
background:
linear-gradient(
-90deg, /* Rotated to be vertical */
color-mix( in srgb, var( --black ), transparent 50% ),
transparent
);
}
}
}
}
Code language: CSS (css)However, when we scroll along the x-axis, we need to add one more trick: although the browser always knows what width: 100% means, height: 100% has no effect without a fixed value. This is why we cannot just stretch the pseudo-elements to the correct size. Time to get creative.
.scroll-container {
overflow-y: clip;
&::before,
&::after {
height: calc( infinity * 1px );
}
&::before {
margin-block-end: calc( -infinity * 1px );
}
&::after {
margin-block-start: calc( -infinity * 1px );
}
}Code language: CSS (css)That’s right: We assign infinite heights to our pseudo-elements. Then we move them into the visible area by applying negative infinite margins. This way they will always cover the entire scroll container – sounds a little crazy, but it does the trick.
🪐
Values like 999999px or 999vh would work here as well. But since we have to use a ginormous size anyway, why not go for the biggest one possible?
Infinite possibilities
This was the first time I used animation-timeline in real life. Exactly these kinds of challenges are what I enjoy most in my work as a frontend developer: discovering a new CSS property, experimenting with it, and then suddenly solving all my problems in a clever way.
Creative puzzle-solving like this keeps your mind sharp and is a welcome change of scenery when you have been staring at databases and deployments for too long. So never stop playing around – who knows what else you might discover in the shadows …
In need of even more frontend expertise for “unsolvable” problems?
Contact us! We are always interested in new challenges.
