I have a unique pattern consisting mainly of white and grey hues. To add a touch of color, I am using the box shadow property in CSS to apply a blue filter effect. This technique successfully displays the desired result in Firefox and Chrome browsers. However, I am facing an issue where this effect is not visible on Internet Explorer 11, Edge, and the Facebook browser.
Below is the code snippet I am currently using:
.content-space-two {
position:relative;
padding: 0px;
margin-bottom: 0px;
color: inherit;
background: url('../../assets/patternBackground.jpg') no-repeat center
center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 100px;
padding-bottom: 100px;
min-height: 800px;
-webkit-box-shadow:inset 0 0 0 2000px #1b557ef5;
-moz-box-shadow: inset 0 0 0 2000px #1b557ef5;
box-shadow:inset 0 0 0 2000px #1b557ef5;
-ms-box-shadow:inset 0 0 0 2000px #1b557ef5;
filter: drop-shadow(0px 0px 0px 2000px #1b557ef5);
}