How can I make a webview transparent?

By default, if a webpage doesn't specify a background, 3D WebView sets its background to white in order to match the behavior of normal browsers. However, a web page can opt into having a transparent background instead by including the following meta tag in its <head>

<meta name="transparent" content="true">

If a web page includes that meta tag and doesn't assign an opaque background via CSS, then its background will be transparent. For example, 3D WebView's keyboard UI is a React.js app that uses that tag to achieve a transparent background.

Limitations

Almost all of the 3D WebView packages support transparent webviews, but there are two exceptions:

Alternatives

  • If you want to want to make an entire webview partially transparent, an alternative is to place a CanvasWebViewPrefab inside a CanvasGroup and then use the CanvasGroup.alpha setting to control transparency.

  • WebViewPrefab has an undocumented SetCutoutRect() method that enables it to turn black pixels into transparent pixels within a given rect, and the Keyboard component uses that method to make its background look transparent for Android Gecko and Hololens. Here's the code excerpt from BaseWebView.cs that uses SetCutoutRect():

// Android Gecko and Hololens don't support transparent webviews, so set the cutout
// rect to the entire view so that the shader makes its black background pixels transparent.
if (pluginType == WebPluginType.AndroidGecko || pluginType == WebPluginType.UniversalWindowsPlatform) {
    _webViewPrefab.SetCutoutRect(new Rect(0, 0, 1, 1));
}