Skip to content

Instantly share code, notes, and snippets.

@lagartoflojo
Forked from travismillerweb/scroll-shadow.css
Created October 11, 2017 13:02
Show Gist options
  • Save lagartoflojo/dbec3dc63f94256d369885917f8b4589 to your computer and use it in GitHub Desktop.
Save lagartoflojo/dbec3dc63f94256d369885917f8b4589 to your computer and use it in GitHub Desktop.
CSS - Google Scroll Shadow
/*
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;
@lagartoflojo
Copy link
Author

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