Fluent design style background

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By 1izNoob

I am trying to create a game that emulates the windows fluent design, most of it is fairly doable with shaders but I am struggling with one problem that I cannot seem to figure out:

How can I create a blurry background that shows the stuff behind the app in a blurry way? Something like this:

Setting the entire viewport transparent is doable with


and then I tried to add a shader:

shader_type canvas_item;

void fragment(){
vec4 color = texture(SCREEN_TEXTURE,SCREEN_UV,2);
COLOR = color;

but the shader only shades what is in Godot itself, so it doesn’t help.

I thought about using some kind of screen capture and setting that as a background texture but the problem there is that I wouldn’t get the stuff behind the game but rather the game itself, so this doesn’t help either.

Is there a way of doing this at all?

what if you try to reduce the opacity of the background, then add a texture with a blur shader behind the background?

asetyowatir | 2020-11-24 03:10