Realtime Backdrop effects in Floating Webview


Im planing to make a ios style shortcuts window,

But i couldn't work backdrop effects in realtime, its only refreshes when windows switches

Backdrop Test.bttpreset (4.4 KB)


i found a way, its working like native window right now

just animated backdrop effect with css, its all dynamic now

-webkit-animation: backdrop 5s ease infinite;

@-webkit-keyframes backdrop {
0%{-webkit-backdrop-filter: blur(20px)}
100%{-webkit-backdrop-filter: blur(19px)}

it only has problems when switching spaces

Backdrop Test.bttpreset (4.8 KB)

super nice!!

updated code

bg{animation:bd 20s infinite}
bg{background-color:rgba(88,88,88,.6)}  /* For Dark Appearance */
bg{background-color:rgba(170,170,170,.6)}  /* For Light Appearance */
@keyframes bd{0%,100%{-webkit-backdrop-filter:blur(36px) contrast(250%) invert(20%)}}

if anybody get more native look with different values. please post here, because macos use different settings on lighter and darker backgrounds

1 Like

This trick is amazing!

I'm making the BTT webview available as a Shortcuts action on macOS Monterey, so you will be able to share your creations via the Shortcuts app in the future (which can even take input from other shortcuts).

I'm currently building some examples and this background looks really nice.

BTT webview has to much potential, please focus more on this, maybe we can create app bundles with this like electron. thanks your work on BTT, really appreciated

Imprint | Privacy Policy