Gradients are a great way to mix up a flat / minimalistic design and draw your user’s attention. I tend to use gradients for buttons, headers, or data cards.
In Power Apps, you can create gradients with the image control and SVG’s, allowing you to adjust the code to fit your sizes, colors, etc. opposed to having to use static image files. SVG's are generally smaller in file sizes than importing images and are scalable and responsive.
Gradient Tips:
Stick to using two colors for gradients. More than two can end up looking too busy and messy.
Use analogous colors; colors that are side by side on the color wheel. Or use shades of the same color.
Keep contrast and accessibility in mind when adding text on a gradient.
Example Gradients in Power Apps:
How to add a gradient in Power Apps:
Insert an image (I renamed mine as imgGradient)
Add the following code to the image property:
"data:image/svg+xml;utf8, " & EncodeUrl( "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> width='" & imgGradient_1.Width & "' height='" & imgGradient_1.Height & "> <defs> <linearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'> <stop offset='0' stop-color='#cd62db'/> <stop offset='1' stop-color='#0c2e89'/> </linearGradient> </defs> <rect id='Rectangle_1' data-name='Rectangle 1' width='" & imgGradient_1.Width & "' height='" & imgGradient_1.Height & "' rx='10' fill='url(#linear-gradient)'/> </svg>" )
Linear gradients can be horizontal, vertical or angular:
Horizontal gradients: y1 and y2 are equal and x1 and x2 differ
Vertical gradients: x1 and x2 are equal and y1 and y2 differ
Angular gradients: x1 and x2 differ and y1 and y2 differ
You can also add text to your gradient image.
For example I can update my code to this:
"data:image/svg+xml;utf8, " & EncodeUrl( "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> width='" & imgGradient_1.Width & "' height='" & imgGradient_1.Height & "> <defs> <linearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'> <stop offset='0' stop-color='#cd62db'/> <stop offset='1' stop-color='#0c2e89'/> </linearGradient> </defs> <rect id='Rectangle_1' data-name='Rectangle 1' width='" & imgGradient_1.Width & "' height='" & imgGradient_1.Height & "' rx='10' fill='url(#linear-gradient)'/> <text fill='#ffffff' font-size='45' font-family='Verdana' x='48' y='48'> MY TEXT</text></svg>" )