[HTML/CSS] 텍스트 흐리게 블러 처리 하기 (text-shadow, blur())

 

텍스트를 흐리게 블러 처리하기 위해서 다음 2가지 방법을 사용할 수 있습니다.

• text-shadow
• filter: blur()

 

 

text-shadow

CSS의 text-shadow 속성은 텍스트에 그림자를 만들어줍니다.

text-shadow에 관한 자세한 설명은 지난 포스팅을 참조하세요.

[HTML/CSS] 텍스트에 그림자 넣기 (text-shadow)

 

<div class='ex01'>text-shadow</div>
<div class='ex02'>text-shadow</div>

.ex01 {
  background: blue;
  
  text-shadow: 0px 0px 10px white;
  color: transparent;
}

.ex02 {
  text-shadow: 0px 0px 10px black;
  color: transparent;
}

div {
  font-size: 30px;
  font-weight: bold;
  margin-top: 10px;
  padding: 20px;

}

text-shadow: 0px 0px 10px white;

text-shadow: 0px 0px 10px black;

그림자의 x, y 위치를 0px로 설정하면, 글자의 그림자는 글자 바로 뒤에 위치하게 됩니다.

여기에 blur-radius 값을 10px로 설정하여, 그림자가 blur 처리되어 보이도록 합니다.

 

color: transparent;

글자색을 transparent로 설정하여, 글자를 투명하게 합니다.

 

 

 

filter: blur()

filter 속성에 사용하는 blur() 함수는, 이미지에 블러 처리를 해 줍니다.

<div class='ex01'>blur()</div>
<div class='ex02'>blur()</div>

.ex01 {
  background: blue;
  color: white;
  
  filter: blur(5px);
}

.ex02 {
  filter: blur(5px);
}

div {
  font-size: 30px;
  font-weight: bold;
  margin-top: 10px;
  padding: 20px;

}

filter: blur(5px);

filter에 blur()  함수를 적용하여 글자를 흐리게 하였습니다.

이 blur() 함수는 텍스트 자체에 적용되지 않고, <div> 요소에 적용되었기 때문에

글자가 있는 <div>도 같이 블러 처리가 된 것을 확인할 수 있습니다.