neaumusic neaumusic - 2 months ago 17
CSS Question

CSS -- transparent "glass" modal, everything else darkened


----- JSBin Example ----

The answer is to use



I'm working on a project where we want to display a modal that "sees through" to the backdrop, but everywhere outside of the modal panel is slightly masked.

I have successfully used
border: 10000px rgba(0,0,0,0.3)
border-radius: 10010px
but this is a hack, and I can't outline the modal with a

Is there any standard way for doing this? Bonus points if you can think of a way to apply a transparency filter gradient to an image.



---- JSBin Example ---- GitHub Gist ----

The answer is to use background-attachment

background-attachment: fixed;
background-size: cover;
background-position: center center;
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(;

.modal-backdrop {
    background: url(myurl.png) center center / cover no-repeat fixed

.modal-panel {
    background: url(myurl.png) center center / cover no-repeat fixed

The best value would be fixed so that your backdrop and your modal can share the same viewport X and Y (0, 0) by default

You then scale with background-size percentages or cover

When using background: shorthand, make sure to use a / to separate background-position from background-scale amounts

I ran into a bug on an older device, so I used local then manually computed leftX and topY to line up backdrop and modal-panel background-position at (0, 0) on my viewport.

I then scaled both images with the same percentage, to cover the screen

I also used a gradient, credit -- How to darken a background Image