If you've ever felt limited by the default design options in Power Apps, you’re not alone. While the platform makes building functional apps easy, achieving truly stunning UI designs often requires creative use of advanced tools. Enter the HTML Text control. This often-overlooked feature unlocks a world of possibilities for styling and design, letting you create apps that are not just functional but visually engaging.
In this post, we’ll explore three powerful HTML Text control tricks that can elevate your app designs: Glassmorphism, Dynamic Badges, and Gradient Backgrounds. Each of these techniques is easy to implement and delivers immediate visual impact, whether you’re designing an internal tool or a customer-facing app. Let’s dive in!
If you want to see these concepts in action, check out our YouTube video on Use HTML Gradients and Styling to improve your Power Apps UI. Always a fun time, and of course if you need help with this or any Power Apps concept hit the Contact Us button, we are always happy to help.
Glassmorphism: A Sleek, Modern Look
What is Glassmorphism? Glassmorphism is a design trend that creates a frosted-glass effect. You’ve likely seen it in modern user interfaces—semi-transparent backgrounds with a subtle blur and glow, as seen in the Severe Weather Alerts example below.
Why Use It?
Creates focus while maintaining context by blurring the content behind the element.
Adds a polished, professional touch to your app.
Makes overlays, modals, or navigation menus more engaging.
How to Implement It in Power Apps
To achieve this effect, you’ll use the HTML Text control with inline CSS styling in the HTMLText property. Here’s the code (Note: make sure you begin and end with double quotes):
"<div style='
background: rgba(7, 42, 200, 0.6 );
box-shadow: 0px 0px 20px 0px rgba( 31, 38, 135, 0.77 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
margin: 25px;
border: 1px solid rgba( 255, 255, 255, 0.3 );
border-radius: 10px;
width:" & Self.Width-50 & "px; height: " & Self.Height-51 & "px;'></div>"Key Elements of the Code:
background: rgba(7, 42, 200, 0.6 ): Sets the semi-transparency of the background.
backdrop-filter: blur( 4px ): Applies the frosted blur effect.
border-radius: 10px: Rounds the corners for a smooth, modern look.
width:" & Self.Width-50 & "px; height: " & Self.Height-51 & "px: sets the size of the <div> to match the HTML Text control, adjusting for margins and ensuring the height is 1 pixel less to prevent a scrollbar.
Pro Tip: Use variables in PowerFX to dynamically adjust dimensions or colors based on user interactions or app state.
Real-World Applications:
Highlight key information with a frosted overlay.
Create stylish modals or popups for alerts and confirmations.
Design navigation menus that stand out without overwhelming the content.
Dynamic Badges: Highlight What Matters
What Are Dynamic Badges? Badges are small, attention-grabbing labels often used to display statuses, notifications, or other critical updates. They’re a simple but effective way to improve the usability of your app. Normally, badges with rounded edges are created using a container with a label inside. But it’s difficult to dynamically size such a badge if the label text is dynamic. Enter HTML Text. Using the method below, an HTML <span> tag is used to create perfectly scaled dynamic badges using a single HTML Text control, reducing control count in your app and ensuring pixel-perfect scaling of your badge
How to Implement It in Power Apps
Here’s how you can create badges using the HTML Text control. Place the following code in the HTMLText property:
"<span style='background-color:#f44336; color:white; padding:5px 10px; border-radius:50px; font-size:12px;'>Severe Thunderstorm Warning</span><br><br>
<span style='background-color:#bbae45; color:white; padding:5px 10px; border-radius:50px; font-size:12px;'>Flood Watch</span>"
Key Elements of the Code:
background-color: Defines the badge’s color, which can be dynamic based on data.
padding and border-radius: Create a pill-shaped badge for a modern look.
font-size: Ensures the text is legible even on smaller screens.
Real-World Applications:
Display task statuses like “Pending,” “In Progress,” or “Completed.”
Highlight new notifications or updates.
Use color-coded badges to indicate priority levels.
If you enjoy learning from reading our blog posts, you will LOVE learning in on Training classes. We have Power Apps training available both on-demand and live. Classes for Power Apps, Power Automate, Power Pages, Power BI, and Copilot AI are all available.
Gradient Backgrounds: Add Depth and Style
What Are Gradient Backgrounds? Gradients are smooth color transitions that can make your app visually appealing and professional. Whether used as section dividers or background elements, gradients add a touch of sophistication.
Why Use Them?
Breaks up monotony in the app design.
Helps visually differentiate sections.
Makes your app look modern and polished.
How to Implement It in Power Apps
To create a gradient background, use the HTML Text control with a linear-gradient style:
"<div style='
background: rgb(2,7,93);
background: linear-gradient(180deg, rgba(2,7,93,1) 0%, rgba(95,98,141,1) 100%);
width:" & Self.Width & "px; height: " & Self.Height-1 & "px;'>
</div>"
Key Elements of the Code:
linear-gradient(180deg, rgba(2,7,93,1) 0%, rgba(95,98,141,1) 100%): Creates a top-to-bottom gradient with two colors.
width:" & Self.Width & "px; height: " & Self.Height-1 & "px: Fills the the HTML Text control, less the very bottom pixel when is necessary due to the odd behavior of the scrollbar showing up if the <div> element exactly matches the height of the HTML Text control.
Pro Tip: Because this strategy leaves a white 1-pixel line at the bottom of the HTML Text control, set the Fill property of the HTML Text control to match the color at the bottom of the gradient (in the example, RGBA(95,98,141,1)). This will ensure a perfect background!
Real-World Applications:
Use gradients for section headers or banners.
Highlight important data visualization areas.
Add visual depth to dashboards and forms.
Conclusion
The HTML Text control is a powerful tool for transforming the look and feel of your Power Apps. By mastering techniques like Glassmorphism, Dynamic Badges, and Gradient Backgrounds, you can create apps that are not only functional but also visually stunning. These design tricks improve user experience, make your apps more engaging, and help you stand out as a Power Apps developer.
Next Steps:
Try these techniques in your own apps and see the difference they make.
Explore more HTML and CSS tricks to expand your design capabilities.
Watch the full video tutorial for a step-by-step guide to implementing these effects.
Hit the Contact Us button to get support for this or any other Power Platform challenge you might be having.