diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index d9ad615164..90bedf7161 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -3,8 +3,8 @@
 	<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
 	<div class="banner-container" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''">
 		<div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
+		<div class="fade"></div>
 	</div>
-	<div class="fade"></div>
 	<div class="container">
 		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/>
 		<div class="title">
@@ -67,7 +67,6 @@ export default Vue.extend({
 @import '~const.styl'
 
 .header
-	$banner-height = 320px
 	$footer-height = 58px
 
 	overflow hidden
@@ -91,8 +90,8 @@ export default Vue.extend({
 			> .banner
 				background-color #383838
 
-		> .fade
-			background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
+			> .fade
+				background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
 
 		> .container
 			> .title
@@ -102,7 +101,7 @@ export default Vue.extend({
 					text-shadow 0 0 8px #000
 
 	> .banner-container
-		height $banner-height
+		height 320px
 		overflow hidden
 		background-size cover
 		background-position center
@@ -113,14 +112,12 @@ export default Vue.extend({
 			background-size cover
 			background-position center
 
-	> .fade
-		$fade-hight = 78px
-
-		position absolute
-		top ($banner-height - $fade-hight)
-		left 0
-		width 100%
-		height $fade-hight
+		> .fade
+			position absolute
+			bottom 0
+			left 0
+			width 100%
+			height 78px
 
 	> .container
 		max-width 1200px