diff --git a/resources/style.css b/resources/style.css
index 5526d67ff..2a6f9bea2 100644
--- a/resources/style.css
+++ b/resources/style.css
@@ -12,6 +12,10 @@ window#waybar {
     color: #ffffff;
 }
 
+window#waybar.hidded {
+    opacity: 0.2;
+}
+
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 #workspaces button {
     padding: 0 5px;
diff --git a/src/bar.cpp b/src/bar.cpp
index d042b24e1..c704bd1cd 100644
--- a/src/bar.cpp
+++ b/src/bar.cpp
@@ -266,6 +266,11 @@ auto waybar::Bar::toggle() -> void
 {
   visible = !visible;
   auto zone = visible ? height_ : 0;
+  if (!visible) {
+    window.get_style_context()->add_class("hidded");
+  } else {
+    window.get_style_context()->remove_class("hidded");
+  }
   zwlr_layer_surface_v1_set_exclusive_zone(layer_surface, zone);
   wl_surface_commit(surface);
 }