diff --git a/src/components/CodeModal.vue b/src/components/CodeModal.vue
index 51dfc4751780ea16ffafb3f1de26c46ef874ab15..4c68770692539cd60b6aa1c74175ccad9d4f938f 100644
--- a/src/components/CodeModal.vue
+++ b/src/components/CodeModal.vue
@@ -96,10 +96,7 @@ onUnmounted(() => {
   padding: 2rem 0;
   overflow: hidden;
   transform: translate(-50%, 0);
-
-  @supports (backdrop-filter: blur(0.1rem)) {
-    backdrop-filter: blur(0.1rem);
-  }
+  backdrop-filter: blur(0.1rem);
 }
 
 .code-box {
diff --git a/src/components/Configurator.vue b/src/components/Configurator.vue
index a04a6d450ceb23324eb0b6184a6d0b6b028c4b3d..9817b287bf49208645e0fad8643013365a5e1e30 100644
--- a/src/components/Configurator.vue
+++ b/src/components/Configurator.vue
@@ -166,7 +166,6 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
   width: $layout-sider-width;
   height: 100%;
   background-color: $color-configurator;
-  backdrop-filter: blur(10px);
 }
 
 .configurator {
@@ -209,7 +208,10 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
     align-items: center;
 
     .bg-color-list__item {
-      padding: 0.4rem 0.5rem;
+      position: relative;
+      z-index: 1;
+      flex: 1;
+      padding: 0.6rem 0.5rem;
       cursor: pointer;
       transition: transform 0.2s;
 
@@ -229,7 +231,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
           z-index: -1;
           width: 100%;
           height: 100%;
-          background-color: inherit;
+          background: inherit;
           border-radius: 50%;
           transform: translate(-50%, -50%);
           opacity: 0.5;
@@ -241,6 +243,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
           position: absolute;
           top: 50%;
           left: 50%;
+          z-index: 1;
           color: $color-configurator;
           font-size: 1.5rem;
           transform: translate(-50%, -50%) scale(0.5);
diff --git a/src/components/DownloadModal.vue b/src/components/DownloadModal.vue
index d6afe9ff78a9357ca8e2381cd149876c5f5b0469..2524cc32903ce92d199605dd2b7054cca7047623 100644
--- a/src/components/DownloadModal.vue
+++ b/src/components/DownloadModal.vue
@@ -49,9 +49,12 @@ const { t } = useI18n()
   height: 100%;
   padding: 2rem 0;
   overflow: hidden;
-  background-color: rgba($color-dark, 0.4);
   transform: translate(-50%, 0);
   backdrop-filter: blur(0.3rem);
+
+  @supports not (backdrop-filter: blur(0.3rem)) {
+    background-color: rgba($color-dark, 0.8);
+  }
 }
 
 .download-modal {
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index 3f3cb5fa189872c81f09c6f5a322b6911a267d0b..db47f35c79148f71218371ce1c80002ac770cf87 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -72,8 +72,6 @@ export const SETTINGS: Readonly<AvatarSettings> = {
   clothesShape: Object.values(ClothesShape),
 
   backgroundColor: [
-    '#EEE',
-    '#9287FF',
     '#6BD9E9',
     '#FC909F',
     '#F4D150',
@@ -83,7 +81,11 @@ export const SETTINGS: Readonly<AvatarSettings> = {
     '#FFEBA4',
     '#506AF4',
     '#F48150',
-    '#74D153',
+    'linear-gradient(45deg, #E3648C, #D97567)',
+    'linear-gradient(62deg, #8EC5FC, #E0C3FC)',
+    'linear-gradient(90deg, #ffecd2, #fcb69f)',
+    'linear-gradient(120deg, #a1c4fd, #c2e9fb)',
+    'linear-gradient(-135deg, #fccb90, #d57eeb)',
   ],
   skinColor: ['#F9C9B6', '#AC6651'],
   clothesColor: ['#9287FF', '#6BD9E9', '#FC909F', '#F4D150', '#77311D'],
diff --git a/src/utils/index.ts b/src/utils/index.ts
index b69abdaa96ea83696592ec14ded7949ea5530fef..a236c221157130e5896cc9d84005e461ae44d0bb 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -136,7 +136,7 @@ export function showConfetti() {
 
     const duration = performance.now() + 1 * 1000
 
-    const colors = SETTINGS.backgroundColor.slice(1, 4)
+    const colors = ['#6967fe', '#85e9f4', '#e16984']
 
     void (function frame() {
       myConfetti({