# Gradient Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: gradient-design
- **카테고리**: visual-style
- **연도**: 2016
## 설명
부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다.
## 역사·배경
2016년 Instagram의 그라데이션 로고 변경 이후 웹 디자인 전반에 급속 확산.
## 핵심 원칙
- 부드러움
- 깊이
- 생동감
## 주요 특징
- 부드러운 색상 전환
- 다층 그라데이션
- 생동감 있는 색상
- 깊이감
- 현대적 감각
## 사용 사례
- SaaS 랜딩 페이지
- 앱 아이콘
- 배경 디자인
- CTA 버튼 강조
## 추천 프로젝트 유형
- SaaS 랜딩
- 앱 아이콘
- CTA 버튼
- 배경 디자인
## 장점
- 시각적으로 생동감 있고 현대적
- CSS linear-gradient로 쉽게 구현
- 배경으로 활용 시 콘텐츠 돋보임
## 단점·한계
- 남발 시 눈에 피로
- 인쇄 시 색상 재현 어려움
- 색약·색맹 사용자 고려 필요
## 실제 사용 제품·서비스
- Instagram 로고
- Slack 구 로고
- 많은 SaaS 랜딩 페이지
## 접근성
그라데이션 배경 위 텍스트는 양 끝 모두 대비율 확인 필요. 단색 텍스트보다 복잡함.
## 관련 스타일
- [aurora-design](https://ui.buildersgate.com/styles/aurora-design)
- [glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)
- [duotone](https://ui.buildersgate.com/styles/duotone)
## 디자인 토큰
### 색상
- primary: #667EEA
- secondary: #764BA2
- accent: #F093FB
- background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%)
- surface: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%)
- text: #FFFFFF
- textSecondary: #E0E0E0
- border: rgba(255, 255, 255, 0.3)
### 헤더
- background: linear-gradient(135deg, #667EEA 0%, #764BA2 50%, #F093FB 100%)
- textColor: #FFFFFF
- accentColor: #F093FB
### 타이포그래피
- fontFamily: Montserrat, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.02em
### 스페이싱
- unit: 8px
- scale: 1.1
### 그림자 (Shadows)
- sm: 0 4px 15px rgba(102, 126, 234, 0.4)
- md: 0 8px 30px rgba(102, 126, 234, 0.4)
- lg: 0 15px 50px rgba(102, 126, 234, 0.5)
- xl: 0 20px 70px rgba(102, 126, 234, 0.6)
### Border Radius
- none: 0
- sm: 10px
- md: 20px
- lg: 30px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: rgba(255, 255, 255, 0.3)
### 이펙트
- blur: 10px
- opacity: 0.9
- transition: all 0.5s ease-in-out
### 애니메이션
- duration: 500ms
- easing: ease-in-out
### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=glow / textTransform=none
- 카드: style=glass / hoverEffect=glow
- 인풋: style=filled / focusEffect=glow
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious
### 특수 효과
- glassmorphism: true
- gradientText: true
- animatedBackground: true
- scanlines: false
- noise: false
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=gradient-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=gradient-design&merged=true
Gradient Design
부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다.
2016년 Instagram의 그라데이션 로고 변경 이후 웹 디자인 전반에 급속 확산.
주요 특징
- 부드러운 색상 전환
- 다층 그라데이션
- 생동감 있는 색상
- 깊이감
- 현대적 감각
장단점
장점
- +시각적으로 생동감 있고 현대적
- +CSS linear-gradient로 쉽게 구현
- +배경으로 활용 시 콘텐츠 돋보임
단점 / 한계
- −남발 시 눈에 피로
- −인쇄 시 색상 재현 어려움
- −색약·색맹 사용자 고려 필요
적합한 사용처
사용 사례
- SaaS 랜딩 페이지
- 앱 아이콘
- 배경 디자인
- CTA 버튼 강조
이런 프로젝트에 추천
SaaS 랜딩앱 아이콘CTA 버튼배경 디자인
접근성그라데이션 배경 위 텍스트는 양 끝 모두 대비율 확인 필요. 단색 텍스트보다 복잡함.
실제 사용 예시
Instagram 로고Slack 구 로고많은 SaaS 랜딩 페이지
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Gradient Buttons
생동감 있는 그라데이션 버튼
Gradient Cards
그라데이션 배경의 카드
🎨
Vibrant Colors
부드러운 색상 전환으로 깊이감과 현대적인 느낌을 제공합니다.
✨
Eye Catching
생동감 있는 그라데이션이 시선을 사로잡습니다.
Gradient Text
텍스트에 적용된 그라데이션
Gradient Text
Multi-Color Gradient
Beautiful Typography
Gradient Backgrounds
다양한 그라데이션 패턴
Gradient Borders
그라데이션 테두리 효과
Gradient Border
그라데이션 테두리로 카드를 돋보이게 합니다.
Colorful Frame
화려한 테두리가 시선을 끕니다.