Skip to content

Instantly share code, notes, and snippets.

@travismillerweb

travismillerweb/scroll-shadow.css

Created September 23, 2013 18:57
Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save travismillerweb/6675197 to your computer and use it in GitHub Desktop.
Save travismillerweb/6675197 to your computer and use it in GitHub Desktop.
Download ZIP
CSS - Google Scroll Shadow
Raw
scroll-shadow.css
/*
Gmail/Google Reader Sidebar Scroll Shadows
-------------------------------------------
Neat effect that mimics the scroll shadows that appear in the GOogle sitde bar and visually cues users to scroll up or down depending on their position.
Credit goes to Lea Verou for this awesome find.
Source:
Lea's Talk: http://www.youtube.com/watch?v=3ikye7Qc7Ak
Code Source: http://lea.verou.me/more-css-secrets/#slide9
*/
background:
linear-gradient(white 30%, hsla(0,0%,100%, 0)),
linear-gradient(hsla(0,0%,100%,0) 10px, white 70%) bottom,
radial-gradient(at top, rgba(0,0,0,0.2), transparent 70%),
radial-gradient(at bottom, rgba(0,0,0,0.2), transparent 70%) bottom;
background-repeat:no-repeat;
background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
background-attachment:local, local, scroll, scroll;
@Hermanio
Copy link

Hermanio commented Aug 3, 2017

So far the only one that actually worked, thanks!

@Whip
Copy link

Whip commented Mar 28, 2018

Here's a horizontal version of this: https://gist.github.com/hellojosh/5270953

@jennasalau
Copy link

Doesn't seem to work in Chrome 70.0.3538.110

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