blue filter to background-image

by bc_rikko

HTML

<div class="container">
  <h1 class="title">Black Everyday<br>Company</h1>
</div>

CSS

.container {
  width: 100vw;
  height: 100vh;
  background: #666 url(https://bcrikko.github.io/web-design-practices/single-page-layout/asset/header.jpg) no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
}
.container::before {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  background: inherit;
  filter: blur(5px);
  /* position:absoluteのせいで最前面に来てしまうため */
  z-index: -1;
}

.title {
  color: white;
  text-align: center;
  font-size: 60px;
  padding-top: calc(100vh / 2 - 60px);
  text-shadow: 0 0 10px #333;
}