diff --git a/framework/core/ember/app/styles/flarum/user.less b/framework/core/ember/app/styles/flarum/user.less
index 907224ae5..f1b9a2287 100644
--- a/framework/core/ember/app/styles/flarum/user.less
+++ b/framework/core/ember/app/styles/flarum/user.less
@@ -1,5 +1,17 @@
 .user-card {
   .drawer-components();
+
+  &, & .container {
+    position: relative;
+  }
+}
+.darken-overlay {
+  background: rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 .user-hero {
   & .contextual-controls {
diff --git a/framework/core/ember/app/templates/components/user/user-card.hbs b/framework/core/ember/app/templates/components/user/user-card.hbs
index 4f727c944..17946bebb 100644
--- a/framework/core/ember/app/templates/components/user/user-card.hbs
+++ b/framework/core/ember/app/templates/components/user/user-card.hbs
@@ -1,3 +1,4 @@
+<div class="darken-overlay"></div>
 <div class="container">
   {{#if controls}}
     {{ui/dropdown-button items=controls class="contextual-controls" menuClass="pull-right" buttonClass=controlsButtonClass}}