diff --git a/resources/css/bem/user-level.less b/resources/css/bem/user-level.less
index d62c7c41bbe..f757ca9f719 100644
--- a/resources/css/bem/user-level.less
+++ b/resources/css/bem/user-level.less
@@ -3,6 +3,7 @@
 
 .user-level {
   .center-content();
+  --bg: hsl(var(--hsl-c1));
   width: 50px;
   height: $width;
   font-size: @font-size--large;
@@ -17,36 +18,4 @@
   &__level {
     position: absolute;
   }
-
-  &--tier-iron {
-    --bg: @level-tier-iron;
-  }
-
-  &--tier-bronze {
-    --bg: @level-tier-bronze;
-  }
-
-  &--tier-silver {
-    --bg: @level-tier-silver;
-  }
-
-  &--tier-gold {
-    --bg: @level-tier-gold;
-  }
-
-  &--tier-platinum {
-    --bg: @level-tier-platinum;
-  }
-
-  &--tier-rhodium {
-    --bg: @level-tier-rhodium;
-  }
-
-  &--tier-radiant {
-    --bg: @level-tier-radiant;
-  }
-
-  &--tier-lustrous {
-    --bg: @level-tier-lustrous;
-  }
 }
diff --git a/resources/css/layout.less b/resources/css/layout.less
index 1149cb717d4..922c6cafc58 100644
--- a/resources/css/layout.less
+++ b/resources/css/layout.less
@@ -97,6 +97,16 @@ body {
   // the referred variables are defined in blade layout
   --base-hue: var(--base-hue-override, var(--base-hue-default));
   --base-hue-deg: calc(var(--base-hue) * 1deg);
+
+  // level tier gradients
+  --level-tier-iron: #BAB3AB, #BAB3AB;
+  --level-tier-bronze: #B88F7A, #855C47;
+  --level-tier-silver: #E0E0EB, #A3A3C2;
+  --level-tier-gold: #F0E4A8, #E0C952;
+  --level-tier-platinum: #A8F0EF, #52E0DF;
+  --level-tier-rhodium: #D9F8D3, #A0CF96;
+  --level-tier-radiant: #97DCFF, #ED82FF;
+  --level-tier-lustrous: #FFE600, #ED82FF;
 }
 
 #popup-container {
diff --git a/resources/css/variables.less b/resources/css/variables.less
index 374cb07a2a9..5e3ac75efa9 100644
--- a/resources/css/variables.less
+++ b/resources/css/variables.less
@@ -315,13 +315,3 @@
 @user-card-height: 120px;
 
 @user-list-icon-size: 20px;
-
-// level tier gradients
-@level-tier-iron: #BAB3AB, #BAB3AB;
-@level-tier-bronze: #B88F7A, #855C47;
-@level-tier-silver: #E0E0EB, #A3A3C2;
-@level-tier-gold: #F0E4A8, #E0C952;
-@level-tier-platinum: #A8F0EF, #52E0DF;
-@level-tier-rhodium: #D9F8D3, #A0CF96;
-@level-tier-radiant: #97DCFF, #ED82FF;
-@level-tier-lustrous: #FFE600, #ED82FF;
diff --git a/resources/js/components/user-level.tsx b/resources/js/components/user-level.tsx
index 6310f99f037..2468640986f 100644
--- a/resources/js/components/user-level.tsx
+++ b/resources/js/components/user-level.tsx
@@ -2,7 +2,6 @@
 // See the LICENCE file in the repository root for full licence text.
 
 import * as React from 'react';
-import { classWithModifiers } from 'utils/css';
 import { trans } from 'utils/lang';
 
 export default function UserLevel({ level }: { level: number }) {
@@ -24,11 +23,10 @@ export default function UserLevel({ level }: { level: number }) {
     tier = 'bronze';
   }
 
-  const blockClass = classWithModifiers('user-level', `tier-${tier}`);
-
   return (
     <div
-      className={blockClass}
+      className='user-level'
+      style={{ '--bg': `var(--level-tier-${tier})` } as React.CSSProperties}
       title={trans('users.show.stats.level', { level })}
     >
       <div className="user-level__icon" />