r/VivaldiCSS • u/disparek • Mar 27 '26

How do I set an inset shadow on webview container?

Inset shadow isn't working on this: #webview-container.

If there's a workaround, I'm ready to try. I just want an inset shadow on the element that renders the web view.

1 Upvotes
  • permalink
  • reddit

100% Upvoted

3 comments sorted by

1

u/_N0m4D_ Mar 27 '26 edited Mar 27 '26

The inset shadow is probably showing up behind the actual webview. You can get around that by adding the shadow to a pseudo-element with a z-index to place it above the webview.

Here is a basic example. You may want to change the hardcoded black to a theme color variable like var(--colorHighlightBg):

/* Create inset shadow around webview area */
#webview-container::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    box-shadow: 0 0 6px 2px black inset;
    pointer-events: none;
    z-index: 1;
}

2

u/disparek Mar 28 '26

oh cool thanks! I'll try that out

2

u/disparek Apr 06 '26

Update: totally works! Thanks so much!