diff --git a/src/const.ts b/src/const.ts
index e838e5b..0688e36 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -29,6 +29,7 @@ export const AvatarStyleCountExtra: AvatarConfigExtra = {
 export const CompatibleAgents = ['quark', 'micromessenger', 'weibo', 'douban'];
 
 export const PalettePreset = [
+  'transparent',
   '#fa541c',
   '#faad14',
   '#fadb14',
@@ -58,16 +59,16 @@ export const ShapeStyleMapping: ShapeStyle = {
 };
 
 export const SVGFilter = `<defs>
-  <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
-    <feMorphology operator="dilate" radius="20 20" in="SourceAlpha" result="morphology"/>
-    <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
-    <feComposite in="flood" in2="morphology" operator="in" result="composite"/>
-    <feMerge result="merge">
-          <feMergeNode in="composite" result="mergeNode"/>
-      <feMergeNode in="SourceGraphic" result="mergeNode1"/>
-      </feMerge>
-  </filter>
-</defs>`;
+    <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
+      <feMorphology operator="dilate" radius="20 20" in="SourceAlpha" result="morphology"/>
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="flood" in2="morphology" operator="in" result="composite"/>
+      <feMerge result="merge">
+            <feMergeNode in="composite" result="mergeNode"/>
+        <feMergeNode in="SourceGraphic" result="mergeNode1"/>
+        </feMerge>
+    </filter>
+  </defs>`;
 
 export const FestivalTimeMapping: FestivalTime = {
   halloween: {
diff --git a/src/pages/components/AvatarEditor/index.tsx b/src/pages/components/AvatarEditor/index.tsx
index f8f185d..7a86e35 100644
--- a/src/pages/components/AvatarEditor/index.tsx
+++ b/src/pages/components/AvatarEditor/index.tsx
@@ -82,8 +82,8 @@ export default function AvatarEditor() {
         return `\n<g id="notion-avatar-${type}" ${
           type === 'face' ? 'fill="#ffffff"' : ''
         } ${flipped ? 'transform="scale(-1,1) translate(-1080, 0)"' : ''}>\n
-      ${svgRaw.replace(/<svg.*(?=>)>/, '').replace('</svg>', '')}
-    \n</g>\n`;
+        ${svgRaw.replace(/<svg.*(?=>)>/, '').replace('</svg>', '')}
+      \n</g>\n`;
       }),
     );
 
@@ -95,17 +95,17 @@ export default function AvatarEditor() {
       groups.push(`\n<g id="notion-avatar-${festival}" ${
         flipped ? 'transform="scale(-1,1) translate(-1080, 0)"' : ''
       }>\n
-    ${svgRaw.replace(/<svg.*(?=>)>/, '').replace('</svg>', '')}
-  \n</g>\n`);
+      ${svgRaw.replace(/<svg.*(?=>)>/, '').replace('</svg>', '')}
+    \n</g>\n`);
     }
 
     const previewSvg =
       `<svg viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
-      ${SVGFilter}
-      <g id="notion-avatar" filter="url(#filter)">
-        ${groups.join('\n\n')}
-      </g>
-      </svg>`
+        ${SVGFilter}
+        <g id="notion-avatar" filter="url(#filter)">
+          ${groups.join('\n\n')}
+        </g>
+        </svg>`
         .trim()
         .replace(/(\n|\t)/g, '');
 
@@ -135,6 +135,8 @@ export default function AvatarEditor() {
       scale: window.devicePixelRatio,
       width: dom.offsetWidth,
       height: dom.offsetHeight,
+      backgroundColor:
+        background.color === 'transparent' ? null : background.color,
     });
     const userAgent = window.navigator.userAgent.toLowerCase();
     const isNeedCompatible = CompatibleAgents.some(
@@ -185,14 +187,14 @@ export default function AvatarEditor() {
   return (
     <>
       {/* {modalStates.avatarPicker && (
-        <AvatarPicker
-          onCancel={() => toggleModal('avatarPicker')}
-          avatarPart={avatarPart}
-          onConfirm={(newIdx) =>
-            switchConfig({ index: newIdx, part: avatarPart.part })
-          }
-        />
-      )} */}
+          <AvatarPicker
+            onCancel={() => toggleModal('avatarPicker')}
+            avatarPart={avatarPart}
+            onConfirm={(newIdx) =>
+              switchConfig({ index: newIdx, part: avatarPart.part })
+            }
+          />
+        )} */}
       {modalStates.download && (
         <DownloadModal
           onCancel={() => {
@@ -216,17 +218,17 @@ export default function AvatarEditor() {
         />
       )}
       {/* {modalStates.palette && (
-        <PaletteModal
-          onCancel={() => {
-            toggleModal('palette');
-          }}
-          onSelect={(background: AvatarBackgroundConfig) => {
-            setBackground({ ...background });
-            toggleModal('palette');
-          }}
-          backgroundConfig={background}
-        />
-      )} */}
+          <PaletteModal
+            onCancel={() => {
+              toggleModal('palette');
+            }}
+            onSelect={(background: AvatarBackgroundConfig) => {
+              setBackground({ ...background });
+              toggleModal('palette');
+            }}
+            backgroundConfig={background}
+          />
+        )} */}
       <div className="flex justify-center items-center flex-col">
         <div
           style={{
diff --git a/src/pages/components/Popover/Palette/index.tsx b/src/pages/components/Popover/Palette/index.tsx
index fa7fc6b..90bcbec 100644
--- a/src/pages/components/Popover/Palette/index.tsx
+++ b/src/pages/components/Popover/Palette/index.tsx
@@ -100,7 +100,18 @@ export default function PalettePopover({
               className={`w-12 h-10 sm:w-20 sm:h-12 rounded outline-none select-none border-3 border-solid border-black ${
                 color === bgColor && 'ring-2 ring-offset-2 ring-black'
               }`}
-              style={{ background: color }}
+              style={{
+                background:
+                  color === 'transparent'
+                    ? `repeating-linear-gradient(
+                45deg,
+                #fff,
+                #fff 4px,
+                #ff0000 4px,
+                #ff0000 8px
+              )`
+                    : color,
+              }}
             >
               {' '}
             </button>