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>
@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