When asked "What is Power Apps?" I often explain by saying "Imagine Power Point and Excel had a baby, that would be Power Apps. Visual design like Power Point and Low Code formulas like Excel to tie design and functionality together.".

However, one visual element that I use a lot in Power Point is still missing in Power Apps. That is the Gradient Fill element. However, in Power Apps we have the Power Apps Component Framework that allow creation of custom controls and visual elements that can be used in Power Apps. So, I have created a Gradient Fill control that fills some of the needs you might have for using gradient colors.

The control has several properties that can be configured and that makes it quite flexible and useful for many types of visual designs and effects. It also supports animation of the gradient colors as well gradient layout.

 
Shapes and Gradients

To begin with it supports both Rectangular and Circular shapes as well as Linear and Radial gradients


Basic shapes and gradients

 
Gradient Colors

Gradient colors are applied via datasets. This makes it simple to configure even complex and dynamic gradients. The dataset for a simple even White to Black gradient looks like this:

ClearCollect(gradientColors,
    { offset: 0, color: "White" },
    { offset: 100, color: "Black" }
)


The offset defines where on the gradient path the opacity is 100%. So the above gradient starts with 100% white at point 0 of the gradient and ends with 100% black at the last point. 

You can add many colors to the gradient by adding more rows to the dataset.

The following produce a rainbow gradient

ClearCollect(rainbowColors, 
    { offset: 5, color: "violet" },
    { offset: 20, color: "indigo" },
    { offset: 35, color: "blue" },
    { offset: 50, color: "green" },
    { offset: 65, color: "yellow" },
    { offset: 80, color: "orange" },
    { offset: 95, color: "red" }
)


Here are above examples with rainbow gradients applies


Rainbow gradients




Since the gradients are using all supported colors of Power Apps you can also create gradients that include transparent colors.

The following gradient goes from white over transparent to black

ClearCollect(gradientTransparentColors,
    { offset: 0, color: "White" },
    { offset: 50, color: "Transparent" },
    { offset: 100, color: "Black" }
)


Here are examples with transparent gradient alone and overlayed another gradient.


White-Transparent-Black gradient on gray and overlayed a rainbow gradient
 

Using it in Canvas Apps

The the control can be used in Canvas apps in many differnet ways. You can overlay gradients on top of other controls. Use gradients as backgrounds for controls and Animate the gradients using timers.

Here is a video with a few examples:
 


Power Apps Canvas App - Gradient Fill - Video example

Download Control and source code

You can download the latest release here: https://github.com/jenschristianschroder/PCF-Gradient-Fill/releases

You can download the source code here: https://github.com/jenschristianschroder/PCF-Gradient-Fill