diff --git a/dist/index.js b/dist/index.js
index 33272aff..3bd72f0a 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -109,6 +109,7 @@ exports.GitBlockSettings = exports.NightRainbowSettings = exports.NightGreenSett
 exports.NormalSettings = {
     type: 'normal',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
@@ -118,6 +119,7 @@ exports.NormalSettings = {
 exports.HalloweenSettings = {
     type: 'normal',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
@@ -128,6 +130,7 @@ exports.HalloweenSettings = {
 exports.NorthSeasonSettings = {
     type: 'season',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
@@ -141,6 +144,7 @@ exports.NorthSeasonSettings = {
 exports.SouthSeasonSettings = {
     type: 'season',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
@@ -153,6 +157,7 @@ exports.SouthSeasonSettings = {
 exports.NightViewSettings = {
     type: 'normal',
     backgroundColor: '#00000f',
+    backgroundOpacity: 1.0,
     foregroundColor: '#eeeeff',
     strongColor: 'rgb(255,200,55)',
     weakColor: '#aaaaaa',
@@ -168,6 +173,7 @@ exports.NightViewSettings = {
 exports.NightGreenSettings = {
     type: 'normal',
     backgroundColor: '#00000f',
+    backgroundOpacity: 1.0,
     foregroundColor: '#eeeeff',
     strongColor: 'rgb(255,200,55)',
     weakColor: '#aaaaaa',
@@ -177,6 +183,7 @@ exports.NightGreenSettings = {
 exports.NightRainbowSettings = {
     type: 'rainbow',
     backgroundColor: '#00000f',
+    backgroundOpacity: 1.0,
     foregroundColor: '#eeeeff',
     strongColor: 'rgb(255,200,55)',
     weakColor: '#aaaaaa',
@@ -189,6 +196,7 @@ exports.NightRainbowSettings = {
 exports.GitBlockSettings = {
     type: 'bitmap',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
@@ -732,6 +740,7 @@ const create3DContrib = (svg, userInfo, x, y, width, height, settings, isForcedA
         const week = Math.floor(diffDate(startTime, cal.date.getTime()) / 7);
         const baseX = offsetX + (week - dayOfWeek) * dx;
         const baseY = offsetY + (week + dayOfWeek) * dy;
+        // ref. https://github.com/yoshi389111/github-profile-3d-contrib/issues/27
         const calHeight = Math.log10(cal.contributionCount / 20 + 1) * 144 + 3;
         const contribLevel = cal.contributionLevel;
         const isAnimate = settings.growingAnimation || isForcedAnimation;
@@ -1201,7 +1210,8 @@ const createSvg = (userInfo, settings, isForcedAnimation) => {
         .attr('y', 0)
         .attr('width', svgWidth)
         .attr('height', svgHeight)
-        .attr('fill', settings.backgroundColor);
+        .attr('fill', settings.backgroundColor)
+        .attr('fill-opacity', settings.backgroundOpacity);
     if (settings.type === 'pie_lang_only') {
         // pie chart only
         pie.createPieLanguage(svg, userInfo, 0, 0, pieWidth, pieHeight, settings, isForcedAnimation);
diff --git a/src/color-template.ts b/src/color-template.ts
index c0f5207e..e755a8c3 100644
--- a/src/color-template.ts
+++ b/src/color-template.ts
@@ -3,6 +3,7 @@ import * as type from './type';
 export const NormalSettings: type.NormalColorSettings = {
     type: 'normal',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
@@ -13,6 +14,7 @@ export const NormalSettings: type.NormalColorSettings = {
 export const HalloweenSettings: type.NormalColorSettings = {
     type: 'normal',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
@@ -24,6 +26,7 @@ export const HalloweenSettings: type.NormalColorSettings = {
 export const NorthSeasonSettings: type.SeasonColorSettings = {
     type: 'season',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
@@ -38,6 +41,7 @@ export const NorthSeasonSettings: type.SeasonColorSettings = {
 export const SouthSeasonSettings: type.SeasonColorSettings = {
     type: 'season',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
@@ -51,6 +55,7 @@ export const SouthSeasonSettings: type.SeasonColorSettings = {
 export const NightViewSettings: type.NormalColorSettings = {
     type: 'normal',
     backgroundColor: '#00000f',
+    backgroundOpacity: 1.0,
     foregroundColor: '#eeeeff',
     strongColor: 'rgb(255,200,55)',
     weakColor: '#aaaaaa',
@@ -67,6 +72,7 @@ export const NightViewSettings: type.NormalColorSettings = {
 export const NightGreenSettings: type.NormalColorSettings = {
     type: 'normal',
     backgroundColor: '#00000f',
+    backgroundOpacity: 1.0,
     foregroundColor: '#eeeeff',
     strongColor: 'rgb(255,200,55)',
     weakColor: '#aaaaaa',
@@ -77,6 +83,7 @@ export const NightGreenSettings: type.NormalColorSettings = {
 export const NightRainbowSettings: type.RainbowColorSettings = {
     type: 'rainbow',
     backgroundColor: '#00000f',
+    backgroundOpacity: 1.0,
     foregroundColor: '#eeeeff',
     strongColor: 'rgb(255,200,55)',
     weakColor: '#aaaaaa',
@@ -90,6 +97,7 @@ export const NightRainbowSettings: type.RainbowColorSettings = {
 export const GitBlockSettings: type.BitmapPatternSettings = {
     type: 'bitmap',
     backgroundColor: '#ffffff',
+    backgroundOpacity: 1.0,
     foregroundColor: '#00000f',
     strongColor: '#111133',
     weakColor: 'gray',
diff --git a/src/create-svg.ts b/src/create-svg.ts
index 9cec4401..2dfc0a15 100644
--- a/src/create-svg.ts
+++ b/src/create-svg.ts
@@ -54,7 +54,8 @@ export const createSvg = (
         .attr('y', 0)
         .attr('width', svgWidth)
         .attr('height', svgHeight)
-        .attr('fill', settings.backgroundColor);
+        .attr('fill', settings.backgroundColor)
+        .attr('fill-opacity', settings.backgroundOpacity);
 
     if (settings.type === 'pie_lang_only') {
         // pie chart only
diff --git a/src/type.ts b/src/type.ts
index 4ae997ec..e85c64d1 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -33,6 +33,7 @@ export type ContributionLevel =
 
 export interface RadarContribSettings {
     backgroundColor: string;
+    backgroundOpacity: number;
     foregroundColor: string;
     weakColor: string;
     radarColor: string;
@@ -52,6 +53,7 @@ export interface RadarContribSettings {
 
 export interface PieLangSettings {
     backgroundColor: string;
+    backgroundOpacity: number;
     foregroundColor: string;
 
     growingAnimation?: boolean;
@@ -62,6 +64,7 @@ export interface PieLangSettings {
 export interface BaseSettings extends RadarContribSettings, PieLangSettings {
     backgroundColor: string;
     foregroundColor: string;
+    backgroundOpacity: number;
     strongColor: string;
     weakColor: string;
     radarColor: string;