Skip to content

Instantly share code, notes, and snippets.

@joshuakemmerling

joshuakemmerling/index.html

Created March 29, 2013 13:45
Show Gist options
  • Save joshuakemmerling/5270953 to your computer and use it in GitHub Desktop.
Save joshuakemmerling/5270953 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS horizontal scrolling shadows
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.scrollbox {
overflow: auto;
width: 200px;
max-height: 200px;
margin: 50px auto;
background:
linear-gradient(90deg, white 0%, rgba(255,255,255,0)),
linear-gradient(-90deg, white 0%, rgba(255,255,255,0)) 100% 0,
radial-gradient(
farthest-side at 0% 50%,
rgba(0,0,0,.2),
rgba(0,0,0,0)
),
radial-gradient(
farthest-side at 100% 50%,
rgba(0,0,0,.2),
rgba(0,0,0,0)
) 100% 0%;
background-repeat: no-repeat;
background-color: #fff;
background-size: 100px 137px, 100px 137px, 14px 137px, 14px 137px;
background-attachment: local, local, scroll, scroll;
}
.scrollbox ul { width: 1000px; }
</style>
</head>
<body>
<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>
</body>
</html>
@jeremiecarlson
Copy link

Great job getting this to work horizontally. I modified the background size to:

background-size: 100px 100%, 100px 100%, 14px 100%, 14px 100%;

Makes it more flexible so it always fills the container

@Grohden
Copy link

Grohden commented Jul 17, 2018

Here's a less version, that i believe is better explained:

.horizontal-shadow {
        @shadow-height: 100%;
        @shadow-color: rgba(0, 0, 0, 0.1);
        @shadow-weight: 9px;

        background:
            //Left start and right start 'inside' container colors (they overlap the shadows)
            linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0)),
            linear-gradient(-90deg, white 0%, rgba(255, 255, 255, 0)) 100% 0,
            //Left and right scroll shadows
            linear-gradient(90deg, @shadow-color, rgba(0, 0, 0, 0)),
            linear-gradient(-90deg, @shadow-color, rgba(0, 0, 0, 0)) 100% 0;

        background-repeat: no-repeat;
        background-color: #fff;
        background-size: 100px 100%, 100px 100%, @shadow-weight @shadow-height, @shadow-weight @shadow-height;
        background-attachment: local, local, scroll, scroll;
}

@ronaldtveen
Copy link

This does works on Safari on macOS, but not on Safari on iOS (the physical device, not emulated).
It (kind of) falls back gracefully, always showing the shadow on the right side whether you scrolled or not but never revealing the left shadow.

Haven't found a fix for it though, so just a little heads up for now.

@SRachamim
Copy link

SRachamim commented Jul 13, 2020 •
edited
Loading

Pure CSS version, with correct variables:

    --bg-color: 255, 255, 255;
    --shadow-alpha: 0.2;
    --shadow-color: 0, 0, 0;
    --shadow-height: 100%;
    --shadow-weight: 14px;

    background: linear-gradient(
        90deg,
        rgb(var(--bg-color)) 0%,
        rgba(var(--bg-color), 0)
      ),
      linear-gradient(-90deg, rgb(var(--bg-color)) 0%, rgba(var(--bg-color), 0))
        100% 0,
      linear-gradient(
        90deg,
        rgba(var(--shadow-color), var(--shadow-alpha)),
        rgba(var(--shadow-color), 0)
      ),
      linear-gradient(
          -90deg,
          rgba(var(--shadow-color), var(--shadow-alpha)),
          rgba(var(--shadow-color), 0)
        )
        100% 0;

    background-attachment: local, local, scroll, scroll;
    background-color: rgb(var(--bg-color));
    background-repeat: no-repeat;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment