diff --git a/packages/react-core/src/components/Drawer/Drawer.tsx b/packages/react-core/src/components/Drawer/Drawer.tsx
index 82030ad0ca3..e7516cb4d78 100644
--- a/packages/react-core/src/components/Drawer/Drawer.tsx
+++ b/packages/react-core/src/components/Drawer/Drawer.tsx
@@ -4,7 +4,8 @@ import { css } from '@patternfly/react-styles';
 
 export enum DrawerColorVariant {
   default = 'default',
-  light200 = 'light-200'
+  light200 = 'light-200',
+  noBackground = 'no-background'
 }
 
 export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
diff --git a/packages/react-core/src/components/Drawer/DrawerContent.tsx b/packages/react-core/src/components/Drawer/DrawerContent.tsx
index 5aef6330c15..5dce83ef59a 100644
--- a/packages/react-core/src/components/Drawer/DrawerContent.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerContent.tsx
@@ -12,7 +12,7 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'default';
+  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
@@ -31,6 +31,7 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
         className={css(
           styles.drawerContent,
           colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
+          colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
           className
         )}
         ref={drawerContentRef}
diff --git a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
index 13a28cadfe3..d929c19d396 100644
--- a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
@@ -36,7 +36,7 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
     '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
   };
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'default';
+  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
 }
 let isResizing: boolean = null;
 let newSize: number = 0;
@@ -257,6 +257,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             hasNoBorder && styles.modifiers.noBorder,
             formatBreakpointMods(widths, styles),
             colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
+            colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
             className
           )}
           ref={panel}
diff --git a/packages/react-core/src/components/Drawer/DrawerSection.tsx b/packages/react-core/src/components/Drawer/DrawerSection.tsx
index c94c448e29c..20fec6c2a39 100644
--- a/packages/react-core/src/components/Drawer/DrawerSection.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerSection.tsx
@@ -9,7 +9,7 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content to be rendered in the drawer section. */
   children?: React.ReactNode;
   /** Color variant of the background of the drawer Section */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'default';
+  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
@@ -23,6 +23,7 @@ export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
     className={css(
       styles.drawerSection,
       colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
+      colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
       className
     )}
     {...props}
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 32be47f1363..bc39bdcc3d2 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -634,7 +634,7 @@ class PrimaryDetailCardView extends React.Component {
         </PageSection>
         <PageSection isFilled padding={{ default: 'noPadding' }}>
           <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
-            <DrawerContent panelContent={panelContent} className={'pf-m-no-background'}>
+            <DrawerContent panelContent={panelContent} colorVariant="no-background">
               <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
             </DrawerContent>
           </Drawer>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
index 2c958292df8..3fd6991a2bf 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
@@ -433,7 +433,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }}>
         <Drawer isExpanded={isDrawerExpanded}>
-          <DrawerContent panelContent={panelContent} className={'pf-m-no-background'}>
+          <DrawerContent panelContent={panelContent} colorVariant="no-background">
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
           </DrawerContent>
         </Drawer>