CSS properties - backdrop-filter

revision:

backdrop-filter property

- is used to apply a graphical effect to the area behind an element. To see the effect, the element or its background must be at least partially transparent.

CSS syntax : backdrop-filter: none | filter | initial | inherit;

Property values

none : default value. No filter is applied to the backdrop

filter : a space-separated list of filter-functions - like: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), sepia(), saturate() - or an url to an SVG filter that will be applied to the backdrop.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.backdropFilter="grayscale(100%)"

example: backdrop-filter property

backdrop-filter: blur(5px)

code: 
                    <div>
                        <div class="background">
                            <div class="transbox">
                            <p>backdrop-filter: blur(5px)</p>
                            </div>
                        </div>
                    </div>
                    <style>
                        div.background {background: lightblue url(../pics/4.jpg) no-repeat center; background-size: cover; 
                            align-items: center; display: flex; justify-content: center; height:30vw; width: 30vw;}
                        div.transbox {background-color: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(5px); 
                            backdrop-filter: blur(5px); padding: 2vw; margin: 3vw; font-weight: bold;}
                    </style>