diff --git a/docs/misc/html.mdx b/docs/misc/html.mdx
index 611122cb4..c0d05a092 100644
--- a/docs/misc/html.mdx
+++ b/docs/misc/html.mdx
@@ -40,6 +40,7 @@ Allows you to tie HTML content to any object of your scene. It will be projected
   calculatePosition={(el: Object3D, camera: Camera, size: { width: number; height: number }) => number[]} // Override default positioning function. (default=undefined) [ignored in transform mode]
   occlude={[ref]} // Can be true or a Ref<Object3D>[], true occludes the entire scene (default: undefined)
   onOcclude={(hidden) => null} // Callback when the visibility changes (default: undefined)
+  transparent // sets the default shader material to transparent (default:false)
   {...groupProps} // All THREE.Group props are valid
   {...divProps} // All HTMLDivElement props are valid
 >
diff --git a/src/web/Html.tsx b/src/web/Html.tsx
index fde1f2598..4db6b2f94 100644
--- a/src/web/Html.tsx
+++ b/src/web/Html.tsx
@@ -127,6 +127,7 @@ export interface HtmlProps
   distanceFactor?: number
   sprite?: boolean
   transform?: boolean
+  transparent?: boolean
   zIndexRange?: Array<number>
   calculatePosition?: CalculatePosition
   as?: string
@@ -168,6 +169,7 @@ export const Html: ForwardRefComponent<HtmlProps, HTMLDivElement> = /* @__PURE__
       calculatePosition = defaultCalculatePosition,
       as = 'div',
       wrapperClass,
+      transparent=false,
       pointerEvents = 'auto',
       ...props
     }: HtmlProps,
@@ -459,6 +461,7 @@ export const Html: ForwardRefComponent<HtmlProps, HTMLDivElement> = /* @__PURE__
             {material || (
               <shaderMaterial
                 side={DoubleSide}
+                transparent={transparent}
                 vertexShader={shaders.vertexShader}
                 fragmentShader={shaders.fragmentShader}
               />