I am trying to design something similar to what\'s seen on Tinder and Twitter own-profile view. There is a blurred background on Tinder behind user\'s own profile picture, a
The basic design goes by various names such as Parallax
, Sticky Header
, or Stretchy Header
.
The specific effect you're looking for is a Parallax Blur.
There are a few implementations at GitHub. Here are two from a quick search:
TwitterCover is a sharp image that blurs as the header grows.
ParallaxBlur is a blurred image that becomes sharper as the header grows.