Create a fade in logo for a loading screen

You may have seen these types of loading screens in multiple games, I will show you an example however, in Bubble Gum Simulator.


Before UIGradients became a thing, you had to use a pretty hacky way of accomplishing this.

Good news! We can now use UIGradients instead!

there will be a place file where you can just change the ImageId if you want at the end

Firstly you will need to have a logo of your choice to use, I will be using this logo:


Set up a ScreenGui like this:

if you don’t want the GUI visible whilst you’re editing in studio, you can disable the Enabled property (we enable it via script later in the tutorial)


Make sure that the logo’s AnchorPoint is .5,.5 and the SizeConstraint is RelativeXX or RelativeYY (so that it is square). Then you can place it anywhere you want with Position. Use scale to size it and use the same scale for both axes. For example with RelativeYY:,0,.5,0), or with RelativeXX:,0,.2,0). Both of these methods work, it’s just personal preference.

Once you have these things completed, you will want to place a UIGradient into the logo object (ImageLabel/ImageButton). Like so:


Make the gradient something on the lines of this:


Three keyframes, the first one is white and the rest are black (or a dark colour).

You can mess with the rotation of the UIGradient to make it gain colour from different angles, however I will just do it from the bottom (rotation -90).

Now we get to the amazing scripting part of this tutorial!

Create a LocalScript wherever you want, but make sure you know how to reference the different objects (I will place mine inside the Logo ImageLabel/ImageButton).

Here is the script you will have:

local tweenService = game:GetService("TweenService") -- defines tweenservice

script.Parent.Parent.Parent.Enabled = true -- optional, only if you have the GUI disabled for studio editing purposes
game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All,false) -- optional

local length = 3 -- you can modify this if you are using ContentProvider

local tweenInfo =,Enum.EasingStyle.Linear) -- creates tweeninfo, you can configure this

wait(2) -- so the player can spawn in, you will need to change this

local info = {}
info.Offset =,-1) -- creates the tween target, you will have to mess with this if you use different angles (this is from the bottom, -90)

local tween = tweenService:Create(script.Parent.UIGradient,tweenInfo,info) -- creates tween
tween:Play() -- plays tween

wait(length+1) -- waits for tween to finish +1 second for aesthetics (optional)

game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All,true) -- optional
script.Parent.Parent.Parent:Destroy() -- removes the gui (make sure ResetOnSpawn is false!)

load.rbxl (21.8 KB)


Good Job man!! I’m always looking for this kind of intro. xD


Thanks for the tutorial! I’ll definitely keep this in mind for the future. :smiley:


Nice tutorial! I can see this being used for intro screens, fading screens, and viewport frames! :thinking:


It doesn’t seem to work in your example file provided.
The GUI just appears and is static, here is a picture of what it looks like.

It just shows like this for around 7 seconds, there is no effect and the image is static in this time until the GUI is destroyed and it disappears.


Ui gradients aren’t enabled for the ingame engine


This was tested within studio with the “Play Solo” mode, and in-game. Both had the same result.
EDIT: Oh, you’re meaning in-game as a whole, not just client-side.
EDIT 2: I’m just an idiot. I didn’t enable the studio feature.


Yeah oof. I’m sorry for that. Thanks tho.


It works in studio, but not in the actual game


Ui gradients are not released in-game yet.


Nice tutorial :+1: Though, you can just put the image label directly into the screen GUI, don’t need a frame container.

1 Like

Very cool. Thanks for sharing.

1 Like

Thank you! I’ve been looking how to make this type of intro.

1 Like

This looks good I may use to for my game this would come in handle with new projects I may come out with.


Cool intro! Will help alot when gradients release.


They have already been released. :wink:


Oh didn’t know. Thanks for info.

1 Like

Wow! I really like this! Really good job!


Very easy and straightforward tutorial. I decided to improve upon what you already had, and I added my own touches.


This is amazing! Is there any way to change the color from black to a different color to fit my game logo? I tried changing the color sequence but it just broke the intro.

1 Like