diff --git a/css/centered-box-overlay.css b/css/centered-box-overlay.css
new file mode 100644
index 0000000..146526a
--- /dev/null
+++ b/css/centered-box-overlay.css
@@ -0,0 +1,23 @@
+#centeredBoxOverlay {
+	background: transparent;
+	opacity: 0;
+	backdrop-filter: blur(var(--blur-strength));
+	
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	
+	margin: 0;
+	padding: 0;
+	z-index: -1;
+	filter: brightness(70%);
+	transition: opacity var(--transition-speed), z-index var(--transition-speed);
+}
+
+#centeredBoxOverlay.showOverlay {
+	transition: opacity var(--transition-speed);
+	opacity: 1;
+	z-index: 0;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 43fdf36..7cae70c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,6 +6,7 @@
 @import url('dock.css');
 @import url('dock-buttons.css');
 @import url('centered-box.css');
+@import url('centered-box-overlay.css');
 @import url('profile-image.css');
 @import url('search-box.css');
 
diff --git a/index.html b/index.html
index de20d38..aa7a86a 100644
--- a/index.html
+++ b/index.html
@@ -46,6 +46,7 @@
 		</div>
 	</div>
 
+	<div id="centeredBoxOverlay"></div>
 	<div class='centeredBar' id='centeredBox'>
 		<div id='profileImageContainer'>
 			<div id='profileImage'></div>
diff --git a/js/show-search-box.js b/js/show-search-box.js
index 5ed4a1c..49b2c15 100644
--- a/js/show-search-box.js
+++ b/js/show-search-box.js
@@ -1,4 +1,5 @@
 var searchBox = document.getElementById('searchBox');
+var centeredBoxOverlay = document.getElementById('centeredBoxOverlay');
 
 let searchBoxVisility = false;
 
@@ -35,5 +36,8 @@ const toggleSearchBox = () => {
     	showSearchBox();  	
     }
 
+    // Show overlay
+    centeredBoxOverlay.classList.toggle('showOverlay');
+
 	console.log('toggle searchbox');
 }
\ No newline at end of file