한눈에 보는 정의
이미지나 배경을 뿌옇게 흐리게 만들어 앞쪽 글자나 요소를 돋보이게 하는 화면 효과.
이런 말로 들어요
- 상단 메뉴 뒤 배경은 살짝 블러 처리할게요.
- 배경 사진이 복잡해서 블러를 주고 글자를 올리겠습니다.
그림으로 보기
배경 사진을 흐리게 하면 위에 올린 글자가 눈에 잘 들어옵니다. 숫자(px)가 클수록 더 흐려집니다.
하캄솔루션 자체 제작 설명도식직접 해 보기
가을 특강 모집
filter: blur(8px) 사진 자체를 흐립니다.
가을 특강 모집
backdrop-filter: blur(8px) 카드 뒤에 비치는 부분만 흐립니다.
자세히 알아보기
CSS에서는 요소 자체를 흐리게 하는 filter: blur()와, 요소 뒤에 비치는 배경만 흐리게 하는 backdrop-filter: blur()를 씁니다. 사진 위에 글을 얹을 때 배경을 흐리면 글자가 잘 읽히고, 유리처럼 비치는 메뉴 디자인에도 쓰입니다. 숫자(px)가 클수록 더 많이 흐려집니다.
실무 예시
예를 들어 행사 사진 위에 "가을 특강 모집" 문구를 올릴 때 사진에 8px 정도 블러를 주면 문구가 또렷해집니다.
함께 살펴볼 점
흐림 효과는 저사양 휴대폰에서 스크롤을 느리게 만들 수 있습니다. 블러를 줘도 글자와 배경의 명도 대비가 충분한지 따로 확인합니다.
AI에게 이렇게 요청해 보세요
상단 메뉴 배경을 흰색 70% 투명도로 하고 뒤 콘텐츠가 10px 정도 흐리게 비치게 해 줘. backdrop-filter를 지원하지 않는 브라우저에서는 불투명 배경이 나오게 해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- blur() CSS function | MDN 새 창
blur() 함수가 입력 이미지에 가우시안 흐림을 적용하며 반지름 값으로 정도를 정한다는 설명을 확인했습니다.
자료 확인 - backdrop-filter | MDN 새 창
backdrop-filter가 요소 뒤 영역에 흐림 같은 그래픽 효과를 적용한다는 설명을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정