background-attachment: local

Shadows that show there is more to scroll

CaveatThe two cover gradients have to match the container background exactly. Put this on a transparent or patterned surface and the covers read as grey smears sitting on top of your design.

FallbackNo JavaScript, no scroll listener. The local layers move with the content and the scroll layers stay put — the overlap is what makes a shadow appear only when it should.

background:
  /* covers, must match the surface */
  linear-gradient(90deg, #131822 30%, transparent)
    left / 42px 100% no-repeat local,
  /* the shadows underneath them */
  radial-gradient(farthest-side at 0,
    rgba(0,0,0,.55), transparent)
    left / 18px 100% no-repeat scroll,
  #131822;

Published 13 Aug 2026