diff --git a/components/color-picker/style/color-block.ts b/components/color-picker/style/color-block.ts
index e5b3c1ce8c..24e110d431 100644
--- a/components/color-picker/style/color-block.ts
+++ b/components/color-picker/style/color-block.ts
@@ -6,9 +6,9 @@ const TRANSPARENT_DOT_COLOR = '#EEE';
 /**
  * @private Internal usage only
  */
-export const getTransBg = (size: number): CSSObject => ({
+export const getTransBg = (size: string): CSSObject => ({
   backgroundImage: `conic-gradient(${TRANSPARENT_DOT_COLOR} 0 25%, transparent 0 50%, ${TRANSPARENT_DOT_COLOR} 0 75%, transparent 0)`,
-  backgroundSize: `${size}px ${size}px`,
+  backgroundSize: `${size} ${size}`,
 });
 
 const genColorBlockStyle = (token: ColorPickerToken, size: number): CSSObject => {
@@ -21,7 +21,7 @@ const genColorBlockStyle = (token: ColorPickerToken, size: number): CSSObject =>
       width: size,
       height: size,
       boxShadow: colorPickerInsetShadow,
-      ...getTransBg(size / 2),
+      ...getTransBg('50%'),
       [`${componentCls}-color-block-inner`]: {
         width: '100%',
         height: '100%',
diff --git a/components/color-picker/style/picker.ts b/components/color-picker/style/picker.ts
index fbd393b7a7..7bce67d59f 100644
--- a/components/color-picker/style/picker.ts
+++ b/components/color-picker/style/picker.ts
@@ -58,7 +58,7 @@ const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
         borderRadius: colorPickerSliderHeight / 2,
         boxShadow: colorPickerInsetShadow,
       },
-      '&-alpha': getTransBg(8),
+      '&-alpha': getTransBg(`${colorPickerSliderHeight}px`),
       marginBottom: marginSM,
     },