Filters, backdrops and masks

by kmouse

HTML

<div class="container">
  <div class="box mask-image"></div>
  <div class="box backdrop"></div>
  <div class="box backdrop filter"></div>
  <div class="box backdrop filter mask-image"></div>
</div>

<div class="container">
  <div class="box green backdrop"></div>
  <div class="box green mask-image"></div>
  <div class="box green backdrop mask-image"></div>
  <div class="box green backdrop mask-image filter"></div>
</div>

<div class="container">
  <div class="box green"></div>
  <div class="box green backdrop"></div>
  <div class="box green filter"></div>
  <div class="box green filter mask-image"></div>
</div>

<div class="container">
  <div class="box background green"></div>
  <div class="box foreground backdrop"></div>

  <div class="box background green"></div>
  <div class="box foreground backdrop filter"></div>

  <div class="box background green"></div>
  <div class="box foreground backdrop mask-image"></div>

  <div class="box background green"></div>
  <div class="box foreground backdrop filter mask-image"></div>
</div>

<div class="container">
  <div class="box background green"></div>
  <div class="box foreground red filter"></div>

  <div class="box background green"></div>
  <div class="box foreground red filter backdrop"></div>

  <div class="box background green"></div>
  <div class="box foreground red filter mask-image"></div>

  <div class="box background green"></div>
  <div class="box foreground red filter backdrop mask-image"></div>
</div>

<div class="container">
  <div class="box background green"></div>
  <div class="box foreground red mask-image"></div>

  <div class="box background green"></div>
  <div class="box foreground red mask-image backdrop"></div>

  <div class="box background green"></div>
  <div class="box foreground red mask-image filter"></div>

  <div class="box background green"></div>
  <div class="box foreground red mask-image backdrop filter"></div>
</div>

CSS

body {
	background-color: #ccc;
	width: 800px;
}

.container {
	display: flow-root;
	padding-bottom: 15px;
	border-bottom: 2px solid #aaa;
	margin-bottom: 15px;
}

.box {
	margin: 0 10px;
	width: 100px;
	height: 100px;
	float: left;
}

.backdrop {
	backdrop-filter: blur(10px);
}

.filter {
	filter: sepia(1);
}

.mask-image {
	mask-image: url('https://i.imgur.com/6QGXpoP.png');
	mask-mode: luminance;
	mask-size: 100%;
	mask-repeat: no-repeat;
	mask-position: center;
}

.green {
	background-color: green;
}

.red {
	background-color: red;
}

.background {
	width: 50px;
	height: 50px;
	margin: 25px 35px;
}

.foreground {
	margin-left: -110px;
}