diff --git a/assets/css/routes/user-center/level.css b/assets/css/routes/user-center/level.css
index 211d6bce..39aab51f 100644
--- a/assets/css/routes/user-center/level.css
+++ b/assets/css/routes/user-center/level.css
@@ -50,6 +50,53 @@
   pointer-events: none;
 }
 
+/* Match zibll .colorful-bg / .jb-vip1, scoped to the level summary card. */
+.aksrt-level-card--summary.colorful-bg {
+  background: var(--this-bg);
+  background-size: 120%;
+  color: var(--this-color);
+}
+
+.aksrt-level-card--summary.colorful-bg > .colorful-make,
+.aksrt-level-card--summary.colorful-bg > .colorful-make::before,
+.aksrt-level-card--summary.colorful-bg > .colorful-make::after {
+  position: absolute;
+  color: var(--this-color);
+  background: var(--this-bg);
+  border-radius: 100%;
+  content: ' ';
+}
+
+.aksrt-level-card--summary.colorful-bg > .colorful-make {
+  top: 60%;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  width: 323px;
+  height: 290px;
+}
+
+.aksrt-level-card--summary.colorful-bg > .colorful-make::before {
+  top: -325px;
+  right: -558px;
+  bottom: 0;
+  width: 677px;
+  height: 300px;
+  transform: rotate(341deg);
+  opacity: .6;
+}
+
+.aksrt-level-card--summary.colorful-bg > .colorful-make::after {
+  top: -170px;
+  right: auto;
+  bottom: 0;
+  left: -262px;
+  width: 402px;
+  height: 214px;
+  transform: rotate(326deg);
+  opacity: .4;
+}
+
 .aksrt-level-card__summary-inner,
 .aksrt-level-card__growth-inner {
   position: relative;