backdrop-filter - Apple Blur

by Sergey khorev

HTML

<div class="modal">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, sunt ipsa eum praesentium necessitatibus consequuntur odio aperiam aspernatur mollitia corporis cupiditate. Sint quis voluptas eligendi. Cupiditate dolorum deleniti nisi aliquid.
</div>

CSS

.modal {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-transition-property: background-color, -webkit-backdrop-filter;
  transition-property: background-color, -webkit-backdrop-filter;
  transition-property: background-color, backdrop-filter;
  transition-property: background-color, backdrop-filter, -webkit-backdrop-filter;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 8px 13px 0px;
  border-radius: 5px;
  color: #333;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  max-width: 50%;
  padding: 1rem 2rem;
}

body {
  background-image: url('https://habrastorage.org/webt/ue/vj/i6/uevji6om-hntwftu4kgfbt_mfsk.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}