邝立浩 / Zachary / Lappy

Design Engineer

Gradient Cards

Experiment number 1! IMO, this doesn't look TOO bad for a 2 hr prototype! What intrigued me was how the User Interface Gallery was able to create dynamic cards. I was absolutely fascinated by the motion and soft colours!

Hmm...Maybe I could recreate it? Well... yes and no ahah ~ here's a quick demo of what I managed to create.

As highlighted in the blog, the trick is to use blurs and blend mix mode, and a quick inspection of the source code inspection tool reveals that two of the same images where positioned in an absolute container, with a linear-gradient background. The mix-blend-mode was set to screen to create the soft overlay effect. Add in a little differently timed transform and scale and you get a nice blob gradient effect!


Much experimentation is still needed to come up with the correct timing and angling of the gradient cards! Vercel designers are really on a different level to be able to think about design intuitively. I want to reach them someday. Till next time!

:-)