diff --git a/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png b/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png
index 136e191207c..a44bf5a3a7f 100644
Binary files a/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png and b/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png differ
diff --git a/__snapshots__/drawer/showcase/chromium-highContrast/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/chromium-highContrast/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png
index 2b5db72db69..559bc3f85db 100644
Binary files a/__snapshots__/drawer/showcase/chromium-highContrast/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png and b/__snapshots__/drawer/showcase/chromium-highContrast/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ
diff --git a/__snapshots__/drawer/showcase/chromium/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/chromium/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png
index 144302b5a87..4a9d9d114b0 100644
Binary files a/__snapshots__/drawer/showcase/chromium/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png and b/__snapshots__/drawer/showcase/chromium/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ
diff --git a/__snapshots__/drawer/showcase/firefox/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/firefox/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png
index ec1d5999f46..10dd8c79a84 100644
Binary files a/__snapshots__/drawer/showcase/firefox/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png and b/__snapshots__/drawer/showcase/firefox/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ
diff --git a/__snapshots__/drawer/showcase/mobile-chrome/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/mobile-chrome/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png
index 527129ed500..31d680cb795 100644
Binary files a/__snapshots__/drawer/showcase/mobile-chrome/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png and b/__snapshots__/drawer/showcase/mobile-chrome/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ
diff --git a/__snapshots__/drawer/showcase/mobile-safari/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/mobile-safari/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png
index 2f03d73381e..11d96143f17 100644
Binary files a/__snapshots__/drawer/showcase/mobile-safari/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png and b/__snapshots__/drawer/showcase/mobile-safari/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ
diff --git a/__snapshots__/drawer/showcase/webkit/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/webkit/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png
index 9eaa5566c8a..4f190f8d686 100644
Binary files a/__snapshots__/drawer/showcase/webkit/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png and b/__snapshots__/drawer/showcase/webkit/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ
diff --git a/packages/components/src/components/drawer/drawer.lite.tsx b/packages/components/src/components/drawer/drawer.lite.tsx
index de581aba2dc..8e57502963c 100644
--- a/packages/components/src/components/drawer/drawer.lite.tsx
+++ b/packages/components/src/components/drawer/drawer.lite.tsx
@@ -41,7 +41,10 @@ export default function DBDrawer(props: DBDrawerProps) {
 					if (dialogContainerRef) {
 						dialogContainerRef.hidden = false;
 					}
-					if (props.backdrop === 'none') {
+					if (
+						props.backdrop === 'none' ||
+						props.variant === 'inside'
+					) {
 						ref.show();
 					} else {
 						ref.showModal();
@@ -79,7 +82,8 @@ export default function DBDrawer(props: DBDrawerProps) {
 				state.handleClose(event);
 			}}
 			onKeyDown={(event) => state.handleClose(event)}
-			data-backdrop={props.backdrop}>
+			data-backdrop={props.backdrop}
+			data-variant={props.variant}>
 			<article
 				ref={dialogContainerRef}
 				class={cls('db-drawer-container', props.className)}
diff --git a/packages/components/src/components/drawer/model.ts b/packages/components/src/components/drawer/model.ts
index c859c157ee2..b8e3321cea0 100644
--- a/packages/components/src/components/drawer/model.ts
+++ b/packages/components/src/components/drawer/model.ts
@@ -19,13 +19,15 @@ export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
 export const DrawerDirectionList = ['left', 'right', 'up', 'down'] as const;
 export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
 
+export const DrawerVariantList = ['modal', 'inside'] as const;
+export type DrawerVariantType = (typeof DrawerVariantList)[number];
+
 export type DBDrawerDefaultProps = {
 	/**
 	 * The backdrop attribute changes the opacity of the backdrop.
 	 * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`
 	 */
 	backdrop?: DrawerBackdropType;
-
 	/**
 	 * The direction attribute changes the position & animation of the drawer.
 	 * E.g. "left" slides from left screen border to the right.
@@ -36,6 +38,7 @@ export type DBDrawerDefaultProps = {
 	 * React specific to change the header of the drawer.
 	 */
 	drawerHeader?: unknown;
+
 	/**
 	 * The open attribute opens or closes the drawer based on the state.
 	 */
@@ -45,6 +48,10 @@ export type DBDrawerDefaultProps = {
 	 * The "end" depends on which direction you use.
 	 */
 	rounded?: boolean;
+	/**
+	 * Set the variant modal|inside. Defaults to modal.
+	 */
+	variant?: DrawerVariantType;
 };
 
 export type DBDrawerProps = DBDrawerDefaultProps &
diff --git a/packages/components/src/styles/dialog-init.scss b/packages/components/src/styles/dialog-init.scss
index 14267200eb6..1e79c265c93 100644
--- a/packages/components/src/styles/dialog-init.scss
+++ b/packages/components/src/styles/dialog-init.scss
@@ -18,24 +18,38 @@ dialog {
 	z-index: 9996;
 	color: inherit;
 
+	&[data-variant],
 	&[data-backdrop] {
 		@extend %dialog-container;
 	}
 
+	&[data-variant="inside"] {
+		&:not([data-backdrop="none"]) {
+			&::before {
+				content: "";
+				position: fixed;
+				inset: 0;
+			}
+		}
+	}
+
 	&:not([data-backdrop="none"]) {
-		&::backdrop {
+		&::backdrop,
+		&::before {
 			background-color: $backdrop-color;
 			opacity: $backdrop-opacity-strong;
 		}
 
 		&[data-backdrop="invisible"] {
-			&::backdrop {
+			&::backdrop,
+			&::before {
 				opacity: 0;
 			}
 		}
 
 		&[data-backdrop="weak"] {
-			&::backdrop {
+			&::backdrop,
+			&::before {
 				opacity: $backdrop-opacity-weak;
 			}
 		}
diff --git a/showcases/angular-showcase/src/app/components/drawer/drawer.component.html b/showcases/angular-showcase/src/app/components/drawer/drawer.component.html
index d375789adfd..5441b687cdf 100644
--- a/showcases/angular-showcase/src/app/components/drawer/drawer.component.html
+++ b/showcases/angular-showcase/src/app/components/drawer/drawer.component.html
@@ -19,6 +19,7 @@
 			[width]="exampleProps?.width"
 			[spacing]="exampleProps?.spacing"
 			[direction]="exampleProps?.direction"
+			[variant]="exampleProps?.variant"
 			[open]="openDrawer === exampleName"
 			(onClose)="toggleDrawer(undefined)"
 			(close)="toggleDrawer(undefined)"
diff --git a/showcases/react-showcase/src/components/drawer/index.tsx b/showcases/react-showcase/src/components/drawer/index.tsx
index db407444e02..699354e102e 100644
--- a/showcases/react-showcase/src/components/drawer/index.tsx
+++ b/showcases/react-showcase/src/components/drawer/index.tsx
@@ -19,7 +19,8 @@ const getDrawer = ({
 	setOpenDrawer,
 	direction,
 	children,
-	backdrop
+	backdrop,
+	variant
 }: DBDrawerProps & AdditionalDrawerProperties) => (
 	<div>
 		<DBButton
@@ -34,6 +35,7 @@ const getDrawer = ({
 			spacing={spacing}
 			backdrop={backdrop}
 			direction={direction}
+			variant={variant}
 			open={openDrawer === id}
 			onClose={() => {
 				setOpenDrawer(undefined);
diff --git a/showcases/shared/drawer.json b/showcases/shared/drawer.json
index 03c7212945c..71c2a3d6184 100644
--- a/showcases/shared/drawer.json
+++ b/showcases/shared/drawer.json
@@ -175,5 +175,26 @@
 				}
 			}
 		]
+	},
+	{
+		"name": "Example",
+		"examples": [
+			{
+				"name": "(Default) As modal",
+				"props": {
+					"variant": "modal",
+					"open": "open",
+					"onClose": "toggleDrawer(false)"
+				}
+			},
+			{
+				"name": "Inside",
+				"props": {
+					"variant": "inside",
+					"open": "open",
+					"onClose": "toggleDrawer(false)"
+				}
+			}
+		]
 	}
 ]
diff --git a/showcases/vue-showcase/src/components/drawer/Drawer.vue b/showcases/vue-showcase/src/components/drawer/Drawer.vue
index f7669718189..338d3bbb616 100644
--- a/showcases/vue-showcase/src/components/drawer/Drawer.vue
+++ b/showcases/vue-showcase/src/components/drawer/Drawer.vue
@@ -25,6 +25,7 @@ const toggleDrawer = (example?: string) => {
 				:width="exampleProps?.width"
 				:spacing="exampleProps?.spacing"
 				:direction="exampleProps?.direction"
+				:variant="exampleProps?.variant"
 				:open="openDrawer && openDrawer === exampleName"
 				@close="toggleDrawer(undefined)"
 			>