CSS 그림자와 필터 마스터하기: 디자인에 깊이와 스타일을 더하기
Source: Dev.to
박스 그림자 (box-shadow)
box-shadow 속성은 현대 UI 디자인에서 가장 널리 사용되는 스타일링 기법 중 하나입니다.
구문
box-shadow: offset-x offset-y blur-radius spread-radius color;예시
.card {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}offset-x&offset-y→ 그림자의 위치blur-radius→ 그림자 가장자리의 부드러움 정도spread-radius→ 그림자가 커지거나 작아지는 정도color→ 고체 색상 또는 투명 색상 가능
전문가 팁: 레이어드 그림자
단일 무거운 그림자 대신 미묘하고 레이어드된 그림자를 사용해 현실감을 높이세요:
.card {
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.1),
0 4px 6px rgba(0, 0, 0, 0.1);
}이러한 레이어링은 실제 세계에서 빛이 작용하는 방식을 모방합니다.
인셋 그림자
외부 그림자에만 국한되지 않습니다. inset 키워드를 사용하면 그림자가 요소 내부에 표시됩니다.
.input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}버튼을 눌렀을 때의 효과나 컨테이너 내부에 미묘한 깊이를 만들 때 유용합니다.
텍스트 그림자 (text-shadow)
텍스트에도 그림자를 적용하면 놀라운 효과를 얻을 수 있습니다.
기본 예시
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}대비가 강한 히어로 헤딩에 가장 잘 어울립니다.
여러 그림자를 이용한 외곽선 효과
h1 {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}이 트릭은 텍스트에 스트로크와 같은 외곽선을 부여합니다.
이미지와 요소에 적용하는 CSS 필터
필터는 블러, 밝기, 그레이스케일 등 시각 효과를 요소에 적용합니다.
구문
filter: function(value);흔히 사용하는 필터 함수
blur(5px)– 요소를 부드럽게 만듭니다brightness(1.2)– 밝게 혹은 어둡게 조정합니다contrast(150%)– 대비를 높입니다grayscale(100%)– 색상을 제거합니다sepia(100%)– 빈티지 느낌을 줍니다hue-rotate(90deg)– 색조를 회전시킵니다drop-shadow(...)– 요소 형태를 고려한 그림자 효과를 제공합니다
예시
img {
filter: grayscale(100%) brightness(1.2);
}이미지를 흑백으로 만들고 약간 밝기를 높여줍니다.
drop-shadow() 필터와 box-shadow의 차이점
drop-shadow() 필터는 box-shadow와 다르게 요소의 실제 형태(투명 영역 포함)에 그림자를 적용합니다(투명 PNG나 SVG에 이상적).
.logo {
filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.3));
}그림자가 이미지의 경계 상자가 아니라 이미지 자체의 가장자리를 따라 붙게 됩니다—아이콘이나 로고에 딱 맞는 효과입니다.
그림자와 필터 결합하기
여러 개의 필터를 쌓듯이 여러 개의 박스 그림자도 쌓을 수 있습니다.
.hero img {
filter: grayscale(70%) blur(2px) brightness(1.1);
}여기에 미묘한 box-shadow를 추가하면 세련된 디자인 효과를 얻을 수 있습니다.
성능 고려 사항
그림자와 필터는 시각적으로 뛰어나지만 과도하게 사용하면 특히 모바일 기기에서 렌더링 성능에 영향을 줄 수 있습니다. 권장 방법:
blur()와 같은 무거운 필터 대신opacity와transform을 애니메이션하세요.- 그림자
blur-radius값을 적절히 유지하세요(가능하면 50 px 이상은 피함). - 필터는 전략적으로 사용하세요(예: 호버 효과, 이미지 스타일링 등).
창의적인 활용 사례
- 글래스모피즘 – 그림자, 블러 필터, 반투명성을 결합해 서리 낀 유리 효과를 구현합니다.
- 뉴모피즘 – 밝은 배경에 내부·외부 그림자를 동시에 사용해 부드러운 3D UI를 만들어요.
- 테마 이미지 필터 – 로고는 그레이스케일로, 호버 상태에서는 활기찬 필터를 적용합니다.
마무리 생각
그림자와 필터는 단순한 장식이 아니라 초점을 유도하고 깊이를 만들며 분위기를 설정하는 도구입니다. 적절히 사용하면 디자인이 현대적이고 현실감 있게, 사용자 친화적으로 느껴집니다. box-shadow, text-shadow, CSS 필터 효과를 조합해 차별화되고 입체적인 인터페이스를 만들어 보세요.
멋진 CSS 콘텐츠를 기본부터 고급까지 다루는 YouTube Playlist를 확인해 보세요.
CodenCloud 채널에서도 더 많은 정보를 찾아볼 수 있습니다.