CSS 그라디언트와 박스 섀도우: 완벽한 시각적 가이드
CSS 선형 그라디언트, 방사형 그라디언트, 원뿔형 그라디언트, 다중 레이어 박스 섀도우를 마스터하세요 — 실용적인 패턴과 프로덕션 수준의 코드를 생성하는 도구까지 함께 제공합니다.
CSS 그라디언트와 박스 섀도우는 웹 개발자의 도구 상자에서 가장 강력하면서도 충분히 활용되지 않는 시각적 도구입니다. 잘 사용하면 인터페이스에 깊이, 위계감, 세련미를 더할 수 있지만, 잘못 사용하면 2009년대 웹사이트처럼 보이게 만들 수 있습니다. 이 가이드는 기술적인 원리와 감각 모두를 가르쳐 드립니다.
CSS 그라디언트
선형 그라디언트
가장 일반적인 그라디언트 유형입니다. 한 색상에서 다른 색상으로 직선 방향으로 전환됩니다.
/* 기본 왼쪽에서 오른쪽 */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
/* 대각선 */
background: linear-gradient(135deg, #667eea, #764ba2);
/* 여러 색상 정지점 */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);
/* 투명도 적용 */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
/* 하드 정지점 (블렌딩 없음) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);
각도는 도(degree) 단위(0deg = 아래에서 위, 90deg = 왼쪽에서 오른쪽)로 지정하거나 키워드(to top, to right, to bottom-right)로 지정할 수 있습니다.
방사형 그라디언트
중심점에서 바깥쪽으로 퍼져 나가는 형태입니다.
/* 원형 그라디언트 */
background: radial-gradient(circle, #667eea, #764ba2);
/* 타원형 (기본값) */
background: radial-gradient(ellipse, #f093fb, #f5576c);
/* 중심 위치 지정 */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);
/* 스포트라이트 효과 */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
방사형 그라디언트는 스포트라이트 효과, 글로우, 비네팅에 적합합니다.
원뿔형 그라디언트
중심점을 기준으로 회전하며 퍼지는 형태로, 색상환이나 파이 차트와 유사합니다.
/* 색상환 */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
/* 파이 차트 세그먼트 */
background: conic-gradient(
#3b82f6 0% 35%,
#8b5cf6 35% 60%,
#10b981 60% 80%,
#f59e0b 80% 100%
);
/* 체커보드 패턴 */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;
그라디언트 텍스트
가장 인기 있는 현대적인 UI 효과 중 하나입니다:
.gradient-text {
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
이미지 위 그라디언트 오버레이
사진 위에서 텍스트 가독성을 확보하기 위한 필수 기법입니다:
.hero {
background-image:
linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%),
url('hero.jpg');
background-size: cover;
}
CSS Gradient Generator를 사용하면 라이브 미리보기로 그라디언트를 시각적으로 만들고 클릭 한 번으로 CSS를 복사할 수 있습니다.
박스 섀도우
box-shadow 문법
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
- offset-x / offset-y — 그림자 위치 (양수 = 오른쪽/아래쪽)
- blur-radius — 0 = 선명한 경계, 높을수록 부드러워짐
- spread-radius — 양수는 그림자를 확장, 음수는 축소
- inset — 외부 대신 요소 내부에 그림자를 그림
기본 섀도우
/* 미묘한 입체감 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
/* 카드 섀도우 */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
/* 대형 모달 섀도우 */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
/* 하드 드롭 섀도우 (블러 없음) */
box-shadow: 4px 4px 0px #1e293b;
다중 레이어 섀도우
쉼표로 여러 그림자를 겹쳐 쌓을 수 있습니다. 이것이 사실적인 그림자를 만드는 핵심입니다:
/* Material Design 입체감 */
box-shadow:
0 2px 1px -1px rgba(0,0,0,0.2),
0 1px 1px 0 rgba(0,0,0,0.14),
0 1px 3px 0 rgba(0,0,0,0.12);
/* 깊이감을 위한 레이어 적용 */
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07);
두 번째 방식은 그림자 에너지를 여러 레이어에 분산시켜 보다 자연스러운 깊이 감쇠를 구현합니다.
인셋 섀도우
요소 내부에 그림자를 그립니다 — 눌림 상태나 입력 필드에 적합합니다:
/* 버튼 눌림 상태 */
button:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
/* 깊이감이 있는 입력 필드 */
input {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
/* 프로스트 글래스 내부 글로우 */
.glass {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 4px 20px rgba(0,0,0,0.2);
}
컬러 섀도우
그림자가 반드시 검은색일 필요는 없습니다. 컬러 섀도우는 생동감을 더해줍니다:
/* 컬러 입체감 */
.btn-primary {
background: #3b82f6;
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
/* 다크 모드 글로우 */
.card {
background: #1e293b;
box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}
부드러운 섀도우 전환
호버 시 그림자를 애니메이션으로 전환하면 만족스러운 인터랙션을 만들 수 있습니다:
.card {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
그라디언트와 섀도우 조합하기
가장 세련된 UI는 그라디언트와 섀도우를 함께 사용합니다:
.premium-card {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 4px 6px -1px rgba(0,0,0,0.2),
0 20px 40px -5px rgba(0,0,0,0.4);
}
.gradient-button {
background: linear-gradient(135deg, #667eea, #764ba2);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
transition: all 0.2s;
}
.gradient-button:hover {
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
transform: translateY(-1px);
}
더 빠르게 작업하기 위한 도구
- CSS Gradient Generator — 여러 색상 정지점, 각도, 유형을 설정해 시각적으로 그라디언트를 만들고, 클릭 한 번으로 복사하세요.
- CSS Box Shadow Generator — 여러 그림자를 레이어로 쌓고, 블러/스프레드/컬러를 조정해 바로 사용 가능한 CSS를 즉시 얻으세요.
- Color Format Converter — HEX, RGB, HSL, RGBA 간 변환 — 섀도우 불투명도 설정 시 필수입니다.
- Color Palette Generator — 보색, 유사색, 단색 팔레트를 생성하여 완벽한 그라디언트 색상 조합을 찾아보세요.
그라디언트와 섀도우는 훌륭한 디자인의 모든 요소와 같은 원칙을 따릅니다: 절제. 잘 만들어진 섀도우나 그라디언트 하나가 컴포넌트를 돋보이게 합니다. 경쟁하는 열두 개의 효과는 오히려 시각적 혼란을 만들 뿐입니다. 기술을 마스터하고, 그것을 의도적으로 사용하세요.