62

How do I add a shadow when a container overflows but only when needed?

What I mean by this is:

  • if there is content available to scroll either on top or bottom, show a shadow to tell the user there is more content to scoll
  • if there isn't content to scroll through, a shadow will not appear

And to clarify further

  • if the content of the container overflows (i.e. it scrolls) and the user is at the very top of the content then there should be a shadow on the bottom of the page and not the top.
  • Same goes if the user is at the bottom of the page expect that there should be a shadow on the top
  • if the content does not overflow the container, then no shadow should be shown to keep things clean.

I have working javascript solutions but I want something purely css for performance reasons.

Any ideas?

3
  • 1
    There is this CodePen sample, which is really similar to what you decribe, but it fades away instead of having shadows. It's pure CSS.
    – Octopus
    Jun 28, 2017 at 4:30
  • 1
    @Octopus fading away might achieve the same thing as shadows but i don't think that code pen is doing exactly what i'm thinking of. It seems like they're using a fixed element that acts as a transparent layer over content that is present all the time and it just seems like it fades away because of the padding on the h1. if you remove this padding, the affect sort goes away. I'm looking for something that pushes that fade layer completely out of the way when it's not needed. I've been messing with position: sticky but i'm wondering if there's an easier way. Jun 28, 2017 at 4:47

5 Answers 5

86

I think your looking for something like this;

Reference : LINK

html {
  background: white;
  font: 120% sans-serif;
}

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;
  background: /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background: /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}
<div class="scrollbox">
  <ul>
    <li>I Show Below Shadow. Go Down Now</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>The end!</li>
    <li>No shadow here. See Above. Go Up</li>
  </ul>
</div>

8
  • 1
    yup that's close! FYI it's not working in chrome correctly but it seems to work in firefox on a mac. let me dissect this a bit and i'll probably accept it Jun 28, 2017 at 5:30
  • 1
    added the reference.
    – Hash
    Jun 28, 2017 at 6:33
  • 25
    But the shadow should stay on top of the contents otherwise the effect doesn't works if the content is colored.
    – AGPX
    Jun 1, 2018 at 13:19
  • 6
    how to do this on horizontal? Aug 25, 2019 at 16:15
  • 6
    @Reigel I made it on horizontal scroll here codepen.io/astro87/pen/LYRQNbd?editors=1100
    – Bartek
    Jan 5, 2021 at 15:30
30

I apologize for answering my own question here but after some googling, I found a good CSS-only solution that works in chrome on macOS.

@Hash provided a solution taken from lea verou's blog. Her solution uses background-attachment: local to achieve the effect however this is currently broken in chrome 59 on macOS??

It worked in 2012 but not in 2017 for me right now at least


It works in 2020 now so you can look at the accepted answer instead of this one. 🤷‍♀️


Nevertheless, her solution is great and you should read more about it here.

In her article (from 2012) she refers to an older yet more compatible solution that uses pseudo elements. This blog post is by Roman Komarov and here are some direct quotes from his article.

Here’s an old idea, but recre­ated with pure CSS.

Orig­i­nally, I had an ex­tra wrap­per and two ex­tra pseudo-el­e­ments on it. Later I de­cided to rewrite the code and to use just a sin­gle el­e­ment (by us­ing ra­dial gra­di­ents).

While this method is sim­ple, there are some lim­i­ta­tions:

  • the back­ground must be solid
    • how­ever, if you'd try back­ground-at­tach­ment: fixed…)
  • there are some po­si­tion­ing is­sues

But in most re­gards this method is rather bul­let­proof.

If you re­place the CSS-gra­di­ents with sim­ple im­ages, this method could work in IE. (It might need a few more small fixes; I didn't check.)

And here is some code copied directly from his blog:

html {
  background: #FFF;
}

.scrollbox {
  position: relative;
  z-index: 1;
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;
  background: #FFF no-repeat;
  background-image: -webkit-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), -webkit-radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: -moz-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), -moz-radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-position: 0 0, 0 100%;
  background-size: 100% 14px;
}

.scrollbox:before,
.scrollbox:after {
  content: "";
  position: relative;
  z-index: -1;
  display: block;
  height: 30px;
  margin: 0 0 -30px;
  background: -webkit-linear-gradient(top, #FFF, #FFF 30%, rgba(255, 255, 255, 0));
  background: -moz-linear-gradient(top, #FFF, #FFF 30%, rgba(255, 255, 255, 0));
  background: linear-gradient(to bottom, #FFF, #FFF 30%, rgba(255, 255, 255, 0));
}

.scrollbox:after {
  margin: -30px 0 0;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #FFF 70%, #FFF);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #FFF 70%, #FFF);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF 70%, #FFF);
}
<div class="scrollbox">
    <ul>
        <li>Not enough content to scroll</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>


<div class="scrollbox">
    <ul>
        <li>Ah! Scroll below!</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>The end!</li>
        <li>No shadow there.</li>
    </ul>
</div>

6

Here's a pure CSS solution I put together that puts the shadow over the content instead of behind it.

/* Stuff that doesn't matter */

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font: 1rem/1.5 arial, sans-serif;
}

.c-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

.c-header {
  width: 100%;
  padding: 1rem 0;
  background: white;
}

.c-header_heading {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
}

/* Stuff that matters */

.c-scrollbox {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: scroll;
}

.c-scrollbox::before {
  content: '';
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  height: 1px;
  background: rgba(0,0,0,.32);
}

.c-scrollbox::after {
  content: '';
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 1rem;
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
<div class="c-container">
  <header class="c-header">
    <h1 class="c-header_heading">Shadow on Scroll</h1>
  </header>
  <div class="c-scrollbox">
    <p>Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    <p>Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p>Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
  </div>
</div>

2
  • 3
    I see just a little pixel line on top, is this working?
    – Alynva
    Jul 2, 2020 at 16:56
  • doesn't work for me, firefox/chrome
    – pstanton
    Oct 26, 2021 at 18:52
2

The CSS-only solution in the accepted answer works great if it is okay for your use case that the shadows are positioned behind the content, as part of the element’s background.

If your use case requires the shadows to be above the content, or independent of the element’s background, you likely need to use a bit of JavaScript. I had these requirements, and built a custom element that works exactly like the OP asked: <scroll-shadow> element.

Example usage (works vertical and horizontal, see demo here):

<scroll-shadow>
  <nav>Content…</nav>
</scroll-shadow>

The OP asked for a CSS-only solution, which this isn’t. Still, it leverages CSS and shouldn’t have a negative impact on performance. Posting this as an answer because from the other comments, it seems that there is a general need to have the shadows above the content.

0

I was able to put together a working CSS only solution with shadow above the content using sticky (and parent div, also some spacing inside the scrollable content):

Demo: https://jsfiddle.net/y79avtek/

.scroll-shadows {
  max-height: 200px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

.parent:before {
  content: '';
  background:     /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center top;
  height: 10px;
  display: block;
  position: absolute;
  width: 200px;
}

.parent:after {
  content: '';
  background:       /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;
  height: 10px;
  display: block;
  position: absolute;
  margin-top: -10px;
  width: 200px;
}

.scroll-shadows:before {
  background:
    /* Shadow Cover TOP */
    linear-gradient(
      white 30%,
      rgba(255, 255, 255, 0)
    ) center top;
  content: '';
  background: white;
  display: block;
  position: sticky;
  height: 10px;
}

.scroll-shadows:after {
  background:
        /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(255, 255, 255, 0), 
      white 70%
    ) center bottom;
  content: '';
  background: white;
  display: block;
  position: sticky;
  height: 10px;
  z-index: 1;
}

/* Not important to the functionality, just for this particular demo */
.scroll-shadows {
  list-style: none;
  padding-right: 0.5rem;
}
.scroll-shadows > * {
  padding: 0.2rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: grid;
  place-items: center;
  font: 500 100% system-ui, sans-serif;
}
.scroll-shadows {
  --scrollbarBG: transparent;
  --thumbBG: #90a4ae;

  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.scroll-shadows::-webkit-scrollbar {
  width: 6px;
}
.scroll-shadows::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
.scroll-shadows::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}
<div class="parent">
  <ul class="scroll-shadows">
    <li>Lorem, ipsum.</li>
    <li>Eligendi, repudiandae.</li>
    <li style="border: 1px solid black;background: white">Dolor, vel.</li>
    <li style="border: 1px solid black;background: white">Obcaecati, praesentium.</li>
    <li>Impedit, tenetur.</li>
    <li style="border: 1px solid black;background: white">Exercitationem, repellat!</li>
    <li>Aut, asperiores!</li>
    <li style="border: 1px solid black;background: white">Dolor, fuga.</li>
    <li>Ab, aliquid<span style="background: white; border: 1px solid black;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>!</li>
    <li style="border: 1px solid black;background: white">Adipisci, totam.</li>
    <li>Error, dicta.</li>
    <li style="border: 1px solid black;background: white">Saepe, vero?</li>
    <li>Eveniet, dolorem!</li>
    <li>Id, tempora!</li>
    <li>Voluptate, consectetur?</li>
    <li style="border: 1px solid black;background: white">Voluptatibus, omnis.</li>
    <li>Eius, fugit.</li>
    <li>Quia, non!</li>
    <li>At, laudantium?</li>
    <li>Commodi, maiores!</li>
  </ul>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.