Breaking News: Grepper is joining You.com. Read the official announcement!

blurring behind a div

SmilingG answered on November 30, 2021 Popularity 9/10 Helpfulness 3/10

answer blurring behind a div

related css blur background behind div

blurring behind a div

Comment

body {
  margin: 0;
}
.wrapper {
  max-width: 100vw;
  background-image: url(https://images.pexels.com/photos/5491161/pexels-photo-5491161.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-color: #cccccc; 
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.box {
  position: fixed;
  top: 30%;
  left: 40%;
  color: #333;
  font-weight: bolder;
  width: 20%;
  padding: 1rem;
  border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(4px);
    -o-backdrop-filter: blur(4px);
    -moz-backdrop-filter: blur(4px);

    backdrop-filter: blur(4px);
}

Popularity 9/10 Helpfulness 3/10 Language css

Source: dev.to

Tags: behind css

Link to this answer
Share Copy Link

Contributed on Apr 02 2022

SmilingG

0 Answers Avg Quality 2/10

Closely Related Answers

css blur background behind div

Comment

/* Filterfunktionen */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

Popularity 9/10 Helpfulness 9/10 Language css

Source: developer.mozilla.org

Tags: background b

Link to this answer
Share Copy Link

Contributed on Nov 30 2021

Wild Weevil

0 Answers Avg Quality 2/10

blurring behind a div

Contents

More Related Answers

blurring behind a div

Closely Related Answers

css blur background behind div

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.