Image default
Web Design

Scrolling Gradient

If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that.

But, what if you don’t want a perfectly vertical gradient? Like you want just the top left corner to change color? Mike Riethmuller, re-using his own technique from the CSS-only scroll indicator (A-grade CSS trickery), did this by overlapping two gradients. The “top” one is fixed position and sort of leaves a hole that another taller gradient peeks through from below on scroll.

Direct Link to ArticlePermalink

The post Scrolling Gradient appeared first on CSS-Tricks.

Related posts

Design Systems at GitHub

KingInExile

Delivering WordPress in 7KB

KingInExile

Better rendering for variable fonts

KingInExile

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More