Blur effect in PowerApps

(0) Share

Report

Posted on by kevinpatel

Hi everyone,

I couldn't find any resource on how to add blur effect on controls in PowerApps.

I tried to use HTMLText control to add blur effect but found no luck. What I am trying to achieve is CSS equivalent of the following styles:

filter: blur(16px)
backdrop-filter: saturate(1.2%) blur(16px)

Applying box-shadow works in HTMLText control but not blur for some reason. I am not sure if this matters but I have tried the above approach in a component.

I would really appreciate if anyone could give me some useful insights.

Thanks in advance 🙂

Categories:

Building Power Apps

All responses (4)

Answers (0)

Sort by

Community Power Pla... Microsoft Employee on at

Like
a
(2)

Report
Copy link

Link copied!

@kevinpatel

HTML in PowerApps is such a trial and error event, at least in my experience.

However, this video may give you some tips relevant to your needs?
kevinpatel 5 on at

Like
a
(1)

Report
Copy link

Link copied!

Thank you @Anonymous. It is said though that there's no way to add blur effect in PowerApps. I guess I'll settle with background-gradient then. Thank you once again.
Danger47 7 on at

Like
a
(0)

Report
Copy link

Link copied!

Couldn't use the blur code, but I tried to get an effect using shadow border which was fine for my requirement. Added the following code within the HTML Text element,
"<div style='margin:190px;width:1px;height:1px;background-color:#;box-shadow:30px 0px 200px 250px #EDEDED; border-radius:px'></div>"

Experiment with different parameters here to get the desired shadow
HarikaVL 66 on at

Like
a
(1)

Report
Copy link

Link copied!

Hi @kevinpatel @Danger47 ,
I found this expression which allow you to blur the background to make the text visible.
$"<div style='background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 8px; width: {Self.Width}px; height: {Self.Height-1}px;'></div>"
Only problem with this is it is giving a line at right end as shown in image. I have been trying to remove it but no luck. Here is the site that helped.
As a workaround i made height{self.height+4000} and i am still left with a kind of dot but it works for me. Try for yourself if it helps.