diff --git a/src/Autoload/Global.gd b/src/Autoload/Global.gd
index 6d6d7f480..305c0bec3 100644
--- a/src/Autoload/Global.gd
+++ b/src/Autoload/Global.gd
@@ -109,6 +109,7 @@ onready var canvas: Canvas = control.find_node("Canvas")
 onready var tabs: Tabs = control.find_node("Tabs")
 onready var main_viewport: ViewportContainer = control.find_node("ViewportContainer")
 onready var second_viewport: ViewportContainer = control.find_node("ViewportContainer2")
+onready var main_canvas_container: Container = control.find_node("Main Canvas")
 onready var canvas_preview_container: Container = control.find_node("Canvas Preview")
 onready var small_preview_viewport: ViewportContainer = canvas_preview_container.find_node(
 	"PreviewViewportContainer"
diff --git a/src/Shaders/UITransparency.gdshader b/src/Shaders/UITransparency.gdshader
new file mode 100644
index 000000000..f94461555
--- /dev/null
+++ b/src/Shaders/UITransparency.gdshader
@@ -0,0 +1,19 @@
+shader_type canvas_item;
+
+uniform float alpha = 0.0;
+
+uniform vec2 screen_resolution = vec2(1280, 720);
+uniform vec2 position = vec2(100.0, 100.0);
+uniform vec2 size = vec2(100.0, 100.0);
+//1280, 720
+
+void fragment(){
+	
+	if (
+	UV.x >= (position.x)/(screen_resolution.x) && UV.y >= (position.y)/(screen_resolution.y)
+		&& 
+	UV.x <= (position.x + size.x)/(screen_resolution.x) && UV.y <= (position.y + size.y)/(screen_resolution.y)
+	){
+		COLOR.a = alpha;
+	}
+}
\ No newline at end of file
diff --git a/src/UI/Dialogs/WindowOpacityDialog.gd b/src/UI/Dialogs/WindowOpacityDialog.gd
index 3501f98be..1a9c8136c 100644
--- a/src/UI/Dialogs/WindowOpacityDialog.gd
+++ b/src/UI/Dialogs/WindowOpacityDialog.gd
@@ -20,7 +20,6 @@ func set_window_opacity(value: float) -> void:
 	spinbox.value = value
 
 	value = value / 100.0
-	Global.control.ui.get_parent().self_modulate.a = value
 	for container in Global.control.ui._panel_container.get_children():
 		container.self_modulate.a = value
 	Global.transparent_checker.transparency(value)
diff --git a/src/UI/UI.gd b/src/UI/UI.gd
new file mode 100644
index 000000000..fd747a9f8
--- /dev/null
+++ b/src/UI/UI.gd
@@ -0,0 +1,23 @@
+extends Panel
+
+onready var main_canvas_container = Global.main_canvas_container
+
+
+# Called when the node enters the scene tree for the first time.
+func _ready() -> void:
+	update_transparent_shader()
+
+
+func _on_main_canvas_item_rect_changed() -> void:
+	update_transparent_shader()
+
+
+func _on_main_canvas_visibility_changed() -> void:
+	update_transparent_shader()
+
+
+func update_transparent_shader():
+	# works independently of the transparency frature
+	material.set("shader_param/screen_resolution", get_viewport().size)
+	material.set("shader_param/position", main_canvas_container.rect_global_position)
+	material.set("shader_param/size", main_canvas_container.rect_size)
diff --git a/src/UI/UI.tscn b/src/UI/UI.tscn
index 175c169de..d9f779a22 100644
--- a/src/UI/UI.tscn
+++ b/src/UI/UI.tscn
@@ -1,4 +1,4 @@
-[gd_scene load_steps=55 format=2]
+[gd_scene load_steps=58 format=2]
 
 [ext_resource path="res://src/UI/ToolButtons.gd" type="Script" id=1]
 [ext_resource path="res://src/UI/Canvas/CanvasPreview.tscn" type="PackedScene" id=2]
@@ -36,6 +36,15 @@
 [ext_resource path="res://assets/graphics/tools/tool_background.png" type="Texture" id=34]
 [ext_resource path="res://addons/dockable_container/dockable_container.gd" type="Script" id=35]
 [ext_resource path="res://addons/dockable_container/layout_panel.gd" type="Script" id=36]
+[ext_resource path="res://src/UI/UI.gd" type="Script" id=37]
+[ext_resource path="res://src/Shaders/UITransparency.gdshader" type="Shader" id=38]
+
+[sub_resource type="ShaderMaterial" id=26]
+shader = ExtResource( 38 )
+shader_param/alpha = 0.0
+shader_param/screen_resolution = Vector2( 1280, 720 )
+shader_param/position = Vector2( 100, 100 )
+shader_param/size = Vector2( 100, 100 )
 
 [sub_resource type="Resource" id=1]
 resource_name = "Tabs"
@@ -173,10 +182,12 @@ shader_param/follow_movement = false
 shader_param/follow_scale = false
 
 [node name="UI" type="Panel"]
+material = SubResource( 26 )
 anchor_right = 1.0
 anchor_bottom = 1.0
 size_flags_horizontal = 3
 size_flags_vertical = 3
+script = ExtResource( 37 )
 __meta__ = {
 "_edit_use_anchors_": false
 }
@@ -1415,6 +1426,8 @@ margin_right = 1276.0
 margin_bottom = 716.0
 
 [connection signal="resized" from="DockableContainer/Tools" to="DockableContainer/Tools/PanelContainer/ToolButtons" method="_on_Tools_resized"]
+[connection signal="item_rect_changed" from="DockableContainer/Main Canvas" to="." method="_on_main_canvas_item_rect_changed"]
+[connection signal="visibility_changed" from="DockableContainer/Main Canvas" to="." method="_on_main_canvas_visibility_changed"]
 [connection signal="reposition_active_tab_request" from="DockableContainer/Main Canvas/TabsContainer/Tabs" to="DockableContainer/Main Canvas/TabsContainer/Tabs" method="_on_Tabs_reposition_active_tab_request"]
 [connection signal="tab_changed" from="DockableContainer/Main Canvas/TabsContainer/Tabs" to="DockableContainer/Main Canvas/TabsContainer/Tabs" method="_on_Tabs_tab_changed"]
 [connection signal="tab_close" from="DockableContainer/Main Canvas/TabsContainer/Tabs" to="DockableContainer/Main Canvas/TabsContainer/Tabs" method="_on_Tabs_tab_close"]