backdrop-filter

by kmouse

HTML

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

CSS

.box {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 25px 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  backdrop-filter: blur(20px);
	/* box-shadow: #fc3 40px 30px 50px 0px; */
  max-width: 50%;
  max-height: 50%;
  padding: 80px 120px;
	transform: rotate3d(0.2, 0.4, 0.1, 15deg);
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}