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

What are Durable Functions?

KingInExile

Is Your Website Font Size Too Small? Large Text Is In

KingInExile

Emojis as Icons

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