How to create a transparent iframe ?

The <iframe> tag is an inline frame. It is used to embed another HTML page within the current HTML page.

Syntax:

<iframe src = "URL"></iframe>

A transparent iframe can be made by setting its background to transparent.

body {
    background-color : transparent;
}

And, the allowtransparency attribute of “iframe” is to be set as “true”.

<iframe src = "URL" allowtransparency = "true"></iframe>

Example:

HTML code:

<!DOCTYPE html> 

<html> 

<body> 

    <div style="background: green;  

            padding: 30px;"> 

        <iframe src="iframe.html" 

            allowtransparency="true"> 

            Alternate content 

        </iframe> 

    </div> 

</body> 

</html>

iframe.html

<!DOCTYPE html> 

<html> 

<body style= 

    "background-color: transparent;  

    text-align: center;  

    color: #ffffff;"> 

    <p>geeksforgeeks</p> 

    <p>geeksforgeeks</p> 

    <p>geeksforgeeks</p> 

    <p>geeksforgeeks</p> 

    <p>geeksforgeeks</p> 

    <p>geeksforgeeks</p> 

    <p>geeksforgeeks</p> 

</body> 

</html>