Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Overflow Fade

Demonstrates the overflow-fade CSS property which applies smooth alpha fading at overflow clip edges instead of hard clipping.

Supports:

  • Uniform fade: overflow-fade: 24px (all edges)
  • Vertical/horizontal: overflow-fade: 24px 0px (top/bottom only)
  • Per-edge: overflow-fade: 24px 0px 24px 0px
  • CSS transitions and @keyframes animation
  • Works with scroll containers

Tip: Some demos are best viewed in a full browser window. Click “Open in a new tab” below for the full experience.

Open in a new tab · View source on GitHub