Opacity
요소의 투명도를 조절해 오버레이, 상태 변화 등 시각적 계층을 표현합니다.
Opacity Scale
0%부터 100%까지 전 단계의 투명도 스케일
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
50%
55%
60%
65%
70%
75%
80%
85%
90%
95%
100%
Interactive Demo
슬라이더를 조절해 투명도 효과를 직접 확인해보세요
50%
0%50%100%
Opacity vs Color Alpha
opacity속성과 컬러 알파값의 차이
opacity: 0.5부모 요소 (50%)
자식도 50%로
✗ 자식 요소에도 영향
color-mix()부모 요소 (50%)
자식은 100% 유지
✓ 배경만 투명
Text Readability
투명도가 텍스트 가독성에 미치는 영향
100%
디자인 시스템은 일관된 사용자 경험을 제공합니다.
가독성 OK80%
디자인 시스템은 일관된 사용자 경험을 제공합니다.
가독성 OK60%
디자인 시스템은 일관된 사용자 경험을 제공합니다.
가독성 OK40%
디자인 시스템은 일관된 사용자 경험을 제공합니다.
비추천20%
디자인 시스템은 일관된 사용자 경험을 제공합니다.
비추천접근성을 위해 본문 텍스트는 60% 이상 의 투명도를 유지해주세요.
Animation Examples
투명도를 활용한 페이드 인/아웃 효과
Box
transition-opacity duration-slow