blur 함수

blur 함수는 가우시안(Gaussian) 흐림 효과를 사용하여 배경 이미지를 흐리게 합니다.

문법

css선택자 {
  filter: blur(흐림 정도);
}

예시

이미지에 2px 흐림 효과를 적용해 봅시다:

html<div id="elem"></div>

css#elem {
  filter: blur(2px);
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

관련 내용

brightness 함수,
배경의 밝기를 설정합니다
contrast 함수,
배경의 대비를 설정합니다
drop-shadow 함수,
배경에 그림자를 설정합니다
hue-rotate 함수,
배경의 색조를 설정합니다
invert 함수,
배경 색상을 반전시킵니다
opacity 함수,
배경의 투명도를 설정합니다
sepia 함수,
배경을 세피아 톤으로 변환합니다
background 속성,
배경에 대한 단축 속성입니다
background-image 속성,
블록에 배경 이미지를 설정할 때 사용합니다
filter 속성,
배경에 스타일을 적용합니다