[CSS 활용] css로 블러 효과(포토샵 blur 효과 주기)

 

HTLM 

<div class="widget center">
  <div class="blur"></div>
  <div class="blur blur2"></div>
  <div class="text">
    <h1 class="">Whereas disregard and contempt for human rights have resulted</h1>
    <p>Go ahead, resize me.</p>
  </div>
<div class="blur_line"></div>
</div>

 

 

 

CSS 

@import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Permanent+Marker&display=swap');
body {
  background: url("https://images.unsplash.com/photo-1593418270780-4c6e6b7eb5af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80")
    no-repeat center center fixed;
  background-size: cover;
}
.blur_line{
  border-top: 1px solid rgb(197 255 251 / 61%);
  position:absolute;
  top:50%;
  left:0;
  width: 100%;
}

.blur {
    background: url("https://images.unsplash.com/photo-1593418270780-4c6e6b7eb5af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80") no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
    filter: blur(9px);
    position: absolute;
    height: 50%;
    left: -50px;
    right: -50px;
    bottom: 0;
}
.blur2{
  filter: blur(8px);
}

.widget {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*  NOT REQUIRED  */

.text {
  height: 200px;
  width: 340px;
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.text h1 {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  margin-top: 57px;
  font-family: "Cinzel", serif;
  font-size: 18px;
  font-weight:normal;
}
.text p {
  color: #ffffff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
  margin-top: 0px;
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: 16px;
}