Right now UIGradient only has the Linear pattern type. This pattern is constrained to the innermost edges and creates a solid color wall in the corners of the frame
LinearFill fixes this by making the gradient stretch to the farthest corners of the frame.
Circular generates a radial falloff pattern, which can be positioned using the existing Offset property.
Conical generates a radial pattern with two axes of gradiation for more sophisticated designs
We actually thought about adding a scale property / open up possibility to directly specify start/end control points in the screengui/surfacegui/billboardgui space. Any of those will unlock the LinearFill. While we currently do lack intuitive ways to edit those properties with correct visualization support.
We should be able to do this with multiple color/transparency keys support.
As a Roblox developer, I currently find a lot of places where I could use radial (circular) gradients, especially in inventory icons and buttons. Adding new gradient patterns would hugely improve the usefulness of UIGradients.
mmm, radial gradients.
At the moment, the only workaround is to upload a white radial gradient created in the image editing program of your choice, add an image label to the button, set the size to fill the entire button, set the ScaleType to Crop, and change the ImageColor3 to your liking. But this has its own problems–it doesn’t conform to the container shape, meaning if you’ve got a uniquely shaped button the gradient could overflow onto the background.
I would love to see these upgrades made to UIGradients because it would vastly simplify my workflow for things like these.
Support for circular UIGradients is still important and something that would open up a lot of workflows - the only way to achieve them currently is by applying the patterns yourself through external tools, which defeats the purpose of being able to animate them in-game to achieve powerful effects such as this UI:
The only way to achieve this in Roblox would be to animate it externally and use a spritesheet, which becomes extremely inefficient for long animations and takes up a bunch of memory (my estimations lie at about ~80-90 MB just for the images).
Adding more types of gradients, like circular and conical gradients, would be a very useful option for us as developers/UI designers. It means less work in Photoshop when all we want to do is add a different style of gradient that matches the element or game style more. I would love to see this added.
I’m a UI Designer, I have to use hacky solutions for similar stuff which is time consuming and often doesn’t yield convincing results. E.g. if I made the radar shadow have a transparency of 0 it would appear more blocky.
I want to use Graidnets for more than Color, I want to use them for transparency effects such as blood screen effects and such that look pretty bad if I were to layer 2 frames on top of eachother.
The only possible way to achieve these hacky solutions are CanvasFrames (Sibling Property only) and layering multiple frames on top of one another.
This would be super cool to see, it would allow alot of interesting effects with ui, things like circular health bars would be so easy! This feels like a very possible feature to add to ui gradients!
