diff --git a/projects/assets-library/assets/styles/_color-palette.scss b/projects/assets-library/assets/styles/_color-palette.scss
index 0790ee0..f828890 100644
--- a/projects/assets-library/assets/styles/_color-palette.scss
+++ b/projects/assets-library/assets/styles/_color-palette.scss
@@ -116,3 +116,7 @@ $color-text-emphasis: $blue-5;
 
 // Elements
 $color-border: $gray-2;
+
+// Background colors for widgets
+$widget-background-gray: linear-gradient(283.16deg, $gray-1 0%, rgba(244, 245, 245, 0.62) 100%);
+$widget-background-white: white;
diff --git a/projects/dashboards/src/widgets/container/layout/auto/auto-container-layout.model.ts b/projects/dashboards/src/widgets/container/layout/auto/auto-container-layout.model.ts
index fea1451..ea07c13 100644
--- a/projects/dashboards/src/widgets/container/layout/auto/auto-container-layout.model.ts
+++ b/projects/dashboards/src/widgets/container/layout/auto/auto-container-layout.model.ts
@@ -41,6 +41,7 @@ export class AutoContainerLayoutModel extends ContainerLayout {
       columns: `repeat(${gridDimension[1]}, minmax(${this.minColumnWidth}px, 1fr))`,
       gap: `${this.gridGap}`,
       enableStyle: this.enableStyle,
+      widgetTheme: this.widgetTheme,
       children: children.map(child => ({ model: child, areaSpan: '' }))
     };
   }
diff --git a/projects/dashboards/src/widgets/container/layout/container-layout.component.scss b/projects/dashboards/src/widgets/container/layout/container-layout.component.scss
index 84f9d5b..24ea662 100644
--- a/projects/dashboards/src/widgets/container/layout/container-layout.component.scss
+++ b/projects/dashboards/src/widgets/container/layout/container-layout.component.scss
@@ -1,3 +1,5 @@
+@import 'color-palette';
+
 :host {
   width: 100%;
   height: 100%;
@@ -9,3 +11,13 @@
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 2px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);
   padding: 0 16px;
 }
+
+.gray {
+  background: $widget-background-gray;
+  border: 1px solid $gray-1;
+  box-shadow: inset 2px 2px 12px rgba(225, 228, 229, 0.24);
+}
+
+.white {
+  background-color: $widget-background-white;
+}
diff --git a/projects/dashboards/src/widgets/container/layout/container-layout.component.ts b/projects/dashboards/src/widgets/container/layout/container-layout.component.ts
index 3d6630a..00a3a3c 100644
--- a/projects/dashboards/src/widgets/container/layout/container-layout.component.ts
+++ b/projects/dashboards/src/widgets/container/layout/container-layout.component.ts
@@ -12,7 +12,7 @@ export const CONTAINER_LAYOUT = new InjectionToken<ContainerLayoutData>('CONTAIN
       <div
         *ngFor="let child of layout.children; let index = index"
         [gdArea]="child.areaSpan"
-        [ngClass]="{ 'container-child': layout.enableStyle }"
+        [ngClass]="[layout.enableStyle ? 'container-child' : '', layout.widgetTheme]"
       >
         <ng-container [hdaDashboardModel]="child.model"> </ng-container>
       </div>
diff --git a/projects/dashboards/src/widgets/container/layout/container-layout.ts b/projects/dashboards/src/widgets/container/layout/container-layout.ts
index 977133a..859530a 100644
--- a/projects/dashboards/src/widgets/container/layout/container-layout.ts
+++ b/projects/dashboards/src/widgets/container/layout/container-layout.ts
@@ -1,6 +1,8 @@
 import { ComponentFactoryResolver, Injector, Type, ViewContainerRef } from '@angular/core';
 import { BOOLEAN_PROPERTY, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
+import { EnumPropertyTypeInstance, ENUM_TYPE } from '../../../properties/enums/enum-property-type';
 import { ContainerLayoutComponent, CONTAINER_LAYOUT } from './container-layout.component';
+import { WidgetTheme } from './widget-theme';
 
 // Make abstract so it exists at runtime and can be used by the dashboard system
 export abstract class ContainerLayout {
@@ -20,6 +22,17 @@ export abstract class ContainerLayout {
   })
   public gridGap: string = '16px';
 
+  @ModelProperty({
+    key: 'widget-theme',
+    // tslint:disable-next-line: no-object-literal-type-assertion
+    type: {
+      key: ENUM_TYPE.type,
+      values: [WidgetTheme.Gray, WidgetTheme.White]
+    } as EnumPropertyTypeInstance,
+    required: false
+  })
+  public widgetTheme: WidgetTheme = WidgetTheme.White;
+
   public abstract getContainerLayoutData(children: object[]): ContainerLayoutData;
 
   public draw(containerRef: ViewContainerRef, children: object[]): void {
@@ -59,5 +72,6 @@ export interface ContainerLayoutData {
   rows?: string;
   columns: string;
   enableStyle: boolean;
+  widgetTheme: WidgetTheme;
   children: ContainerLayoutChildData[];
 }
diff --git a/projects/dashboards/src/widgets/container/layout/custom/custom-container-layout.model.ts b/projects/dashboards/src/widgets/container/layout/custom/custom-container-layout.model.ts
index 3ddd1db..1cd694e 100644
--- a/projects/dashboards/src/widgets/container/layout/custom/custom-container-layout.model.ts
+++ b/projects/dashboards/src/widgets/container/layout/custom/custom-container-layout.model.ts
@@ -34,6 +34,7 @@ export class CustomContainerLayoutModel extends ContainerLayout {
       columns: this.getColumnStyles(),
       gap: `${this.gridGap}`,
       enableStyle: this.enableStyle,
+      widgetTheme: this.widgetTheme,
       children: this.getChildLayoutData(children)
     };
   }
diff --git a/projects/dashboards/src/widgets/container/layout/widget-theme.ts b/projects/dashboards/src/widgets/container/layout/widget-theme.ts
new file mode 100644
index 0000000..cde5bdc
--- /dev/null
+++ b/projects/dashboards/src/widgets/container/layout/widget-theme.ts
@@ -0,0 +1,4 @@
+export enum WidgetTheme {
+  Gray = 'gray',
+  White = 'white'
+}