How to make a holographic card effect?

External Media

I would like to create a holographic effect for the cards like in the video attached above. My idea was to create a GIF but honestly I don’t even know what program to use. Thank you for your help.

2 Likes

This isn’t too complicated to approach! This can be set up with a few ImageLabels inside the card UI frame. Each image makes use of a UIGradient object, which allows you to customise a linear gradient with changing colours and transparency that is applied to whatever UI object it is parented to. This is how it is set up:

  • Background image (the backdrop)

    • UIGradient (gradient starts and ends white, but in the middle there is a faint rainbow)
  • Effect layer image (the swirly pattern you see appear is a transparent image laid over the top)

    • UIGradient (gradient starts and ends fully transparent, with an opaque rainbow in the centre)

Basic scripting is required using TweenService, and all that’s happening is a gentle tween is being played to swipe the Offset of the UIGradient across the image. This should imply the holographic effect you’re looking for :slight_smile:

4 Likes

For those who don’t want to download the video:

3 Likes

Thank you, I will let you know if I manage to do something :grinning:

3 Likes