How can i remove shadow around screen from filter blur() in css?

Question

enter image description here

How to delete this shadow around screen ??? Filter blur does this shadow

      &::before {
        content: "";
        position: absolute;
        background: linear-gradient(to right, rgba(11, 11, 11, 0.766), rgba(11, 11, 11, 0.766)) , url('/Obrazek\ 1.jpeg');
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-color: black;
        filter: blur(20px);
      }

I tried using backdrop filter but its not working

Answer 1

Use backdrop-filter or negative indent for filter block:

body {
  position: relative;
  background: linear-gradient(to bottom, blue,yellow);
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 16px;
  margin: 0;
}

body:after {
  content: '';
  position: absolute;
  background: rgba(11, 11, 11, 0.2);
  inset: 0;
  backdrop-filter: blur(2px);
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, corporis, eos, eaque ex ad porro provident vel iusto dolor accusamus quo dolore animi odit dolorum vero aspernatur magnam rerum hic optio illum est soluta deserunt maiores in ut. Voluptatibus, quod, et, quae quas asperiores quis id rerum molestias reiciendis exercitationem magnam ipsam iusto atque doloremque recusandae laboriosam eveniet voluptatum cumque ipsum est! Perferendis, cupiditate, architecto a cumque libero nihil ut in modi iste magnam fugit porro nulla cum qui ab!