diff --git a/README.md b/README.md
index 7a21920c..c5019245 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,7 @@ You can customize the following parameters:
   - The **extra duration** (ie. how many extra milliseconds should the spinner be visible).
   - The **minimum duration** (ie. how many milliseconds should the spinner be visible at least).
   - The spinner **opacity**.
+  - The backdrop **background-color** (ie. the color of the spinner backdrop, if enabled).
   - The **spinner type**.
 
 ```xml
@@ -101,6 +102,7 @@ You can customize the following parameters:
     [extraDuration]="300"
     [minDuration]="300"
     [opacity]=".6"
+    [backdropBackgroundColor]="#777777"
     [spinner]="spinkit.skWave">
 </ng-http-loader>
 ```
diff --git a/src/lib/components/_variables.scss b/src/lib/components/_variables.scss
index cbfb2b90..eb2d8ac6 100644
--- a/src/lib/components/_variables.scss
+++ b/src/lib/components/_variables.scss
@@ -4,4 +4,3 @@ $spinkit-top: 50% !default;
 $spinkit-position: relative !default;
 
 $spinner-color: #333 !default;
-$backdrop-background-color: #f1f1f1 !default;
diff --git a/src/lib/components/ng-http-loader.component.html b/src/lib/components/ng-http-loader.component.html
index 836cf514..e912f620 100644
--- a/src/lib/components/ng-http-loader.component.html
+++ b/src/lib/components/ng-http-loader.component.html
@@ -1,7 +1,8 @@
 <div id="spinner"
      *ngIf="isVisible$ | async"
      [class.backdrop]="backdrop"
-     [style.opacity]="opacity">
+     [style.opacity]="opacity"
+     [ngStyle]="{'background-color': backdrop ? backdropBackgroundColor : 'transparent'}">
 
     <ng-container *ngComponentOutlet="entryComponent"></ng-container>
 
diff --git a/src/lib/components/ng-http-loader.component.scss b/src/lib/components/ng-http-loader.component.scss
index a8ca5d8c..1313812d 100644
--- a/src/lib/components/ng-http-loader.component.scss
+++ b/src/lib/components/ng-http-loader.component.scss
@@ -12,7 +12,6 @@
         left: 0;
         height: 100%;
         width: 100%;
-        background-color: $backdrop-background-color;
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/src/lib/components/ng-http-loader.component.ts b/src/lib/components/ng-http-loader.component.ts
index 66cd57c0..fb9b769b 100644
--- a/src/lib/components/ng-http-loader.component.ts
+++ b/src/lib/components/ng-http-loader.component.ts
@@ -35,6 +35,7 @@ export class NgHttpLoaderComponent implements OnInit {
     @Input() public filteredUrlPatterns: string[] = [];
     @Input() public minDuration = 0;
     @Input() public opacity = '.7';
+    @Input() public backdropBackgroundColor = '#f1f1f1';
     @Input() public spinner: string | null = Spinkit.skWave;
 
     constructor(private pendingRequestsInterceptor: PendingRequestsInterceptor, private spinnerVisibility: SpinnerVisibilityService) {
diff --git a/src/test/components/ng-http-loader.component.spec.ts b/src/test/components/ng-http-loader.component.spec.ts
index fdb720c6..1467f0ec 100644
--- a/src/test/components/ng-http-loader.component.spec.ts
+++ b/src/test/components/ng-http-loader.component.spec.ts
@@ -798,4 +798,42 @@ describe('NgHttpLoaderComponent', () => {
 
         expect(element.style.opacity).toBe(`0${component.opacity}`);
     });
+
+    it('should have a default backdrop background color if backdrop is true', () => {
+        component.isVisible$ = of(true);
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.backgroundColor).toBe('rgb(241, 241, 241)');
+    });
+
+    it('should be possible to override backdrop background color when backdrop is true', () => {
+        component.isVisible$ = of(true);
+        component.backdropBackgroundColor = '#777777';
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.backgroundColor).toBe('rgb(119, 119, 119)');
+    });
+
+    it('should not have a transparent backdrop background color if backdrop is false', () => {
+        component.isVisible$ = of(true);
+        component.backdrop = false;
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.backgroundColor).toBe('transparent');
+    });
 });