blur()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2016년 9월⁩.

blur()CSS 함수는 주어진 이미지에가우시안 블러를 적용합니다. 반환 값은<filter-function>입니다.

시도해 보기

filter: blur(0);

filter: blur(4px);

filter: blur(1.5rem);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

blur(radius)

radius: <length>로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다.0은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.

css

blur(0)        /* 변화 없음 */blur(8px)      /* 8px 블러 */blur(1.17rem)  /* 1.17rem 블러 */

This page was last modified on⁨2025년 11월 12일⁩ byMDN contributors.