<header>
  <div class="row horizontal">
    <div class="col">
      HEADER HERE    
    </div>
    <nav class="col">
      <ul class="horizontal bare-list">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>    
  </div>
</header>
<main>
  <div class="row">
    <div class="col">
      <h1>Sample backdrop-filter</h1>
    </div>
  </div>
  <div class="row horizontal">
    <div class="col">
      <pre><code>
header {
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px) saturate(180%);
  position: sticky;
  top: 0;
  box-shadow:0 1px 8px rgba(0,0,0,.1);
}
        </code></pre>
    </div>
    <div class="col">
      <img src="https://images.unsplash.com/photo-1556139902-7367723b7e9e?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYxNjAyODk&ixlib=rb-1.2.1&q=80" alt="placeholder image">
    </div>
  </div>
  
  <div class="row horizontal">
    <div class="col">
      <img src="https://images.unsplash.com/photo-1521458634394-4829d38b57f8?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYxNjAzMDI&ixlib=rb-1.2.1&q=80" alt="placeholder image">
    </div>
    <div class="col">
      <p>Main content goes here. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on.
    </div>
  </div>
  
  <div class="row horizontal">
    <div class="col">
      <p>Main content goes here. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on.
    </div>
    <div class="col">
      <img src="https://images.unsplash.com/photo-1532135468830-e51699205b70?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYxNjExMzk&ixlib=rb-1.2.1&q=80" alt="placeholder image">
    </div>
  </div>
  
  <div class="row horizontal">
    <div class="col">
      <img src="https://images.unsplash.com/photo-1521458634394-4829d38b57f8?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYxNjAzMDI&ixlib=rb-1.2.1&q=80" alt="placeholder image">
    </div>
    <div class="col">
      <p>Main content goes here. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on.
    </div>
  </div>
  
  <div class="row horizontal">
    <div class="col">
      <p>Main content goes here. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on.
    </div>
    <div class="col">
      <img src="https://images.unsplash.com/photo-1556139902-7367723b7e9e?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYxNjAyODk&ixlib=rb-1.2.1&q=80" alt="placeholder image">
    </div>
  </div>
  
  <div class="row horizontal">
    <div class="col">
      <img src="https://images.unsplash.com/photo-1521458634394-4829d38b57f8?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYxNjAzMDI&ixlib=rb-1.2.1&q=80" alt="placeholder image">
    </div>
    <div class="col">
      <p>Main content goes here. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on. And go on and on. Keep go on and on.
    </div>
  </div>
  
</main>
<footer>
  <div class="row">
    <div class="col">
      FOOTER HERE. Example by <a href='https://makzan.net'>Makzan</a>. 
    </div>
  </div>
</footer>
/* Key Point */

header {
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px) saturate(180%);
  position: sticky;
  top: 0;
  box-shadow:0 1px 8px rgba(0,0,0,.1);
}

/* End Key Point */



/* monica.css */
* {box-sizing: border-box}
[hidden] {display: none !important}
[disabled] {pointer-events:none; opacity: 0.3}
.horizontal {display: flex; flex-direction: row; justify-content: space-between}
.vertical {display: flex; flex-direction: column}
.center {justify-content: center; align-items: center}
.flex {flex: 1}
html {
  --spacing-xs: 8px;
  --spacing: 24px;
  --spacing-s: 12px;
  --spacing-m: 36px;
}
/* End monica.css */

img {max-width: 100%;}
ul.bare-list,
ol.bare-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Layout */

.row {
  max-width: 800px;
  margin: auto;
}

.col {
  flex: 1;
  padding: 1em;
}

h1 {
  text-align: center;
  font-size: 5rem;
  letter-spacing: -0.4rem;
  background: linear-gradient(
    90deg, 
    rgb(121, 40, 202), 
    rgb(255, 0, 128));
  background-clip: text;
  text-fill-color: transparent;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.