CSS blur() 함수

정의와 사용법

CSS의 blur() 필터 함수는 요소에 흐림 효과를 적용합니다. 값이 클수록 흐림 효과가 강해집니다.

값을 지정하지 않으면 기본적으로 0이 사용됩니다.

<h1>과 <img> 요소에 다른 흐림 효과를 적용하려면：

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

ぼ라러스 배경을 생성하려면：

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

blur(radius)

값	설명
radius	선택 사항입니다. 흐림의 반지름을 지정합니다. 값이 클수록 흐림 효과가 강해집니다. 값을 지정하지 않으면 기본적으로 0(없는 효과)이 사용됩니다.

값

설명

radius

선택 사항입니다. 흐림의 반지름을 지정합니다. 값이 클수록 흐림 효과가 강해집니다.

값을 지정하지 않으면 기본적으로 0(없는 효과)이 사용됩니다.

버전：	CSS 필터 효과 모듈 레벨 1

표格에서의 숫자는 이 함수를 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬	에지	파이어폭스	사파리	오페라
18	12	35	6	15