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

Automate Your Workflow with Node

KingInExile

The Ecological Impact of Browser Diversity

KingInExile

Super-Powered Grid Components with CSS Custom Properties

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