🎨 CSS 그라디언트 생성기

아름다운 그라디언트를 만들고 CSS 코드를 생성해보세요

설정

0%
100%

미리보기

CSS 코드

사용 예시
.gradient-bg {
  
  width: 100%;
  height: 200px;
}
그라디언트 가이드 📚
선형 그라디언트 (Linear)
  • • 직선 방향으로 색상이 변화
  • • 각도로 방향 조절 (0° = 아래→위, 90° = 왼쪽→오른쪽)
  • • 배경이나 버튼에 많이 사용
  • • 여러 색상 지점 설정 가능
원형 그라디언트 (Radial)
  • • 중심점에서 원형으로 색상이 변화
  • • 중심점 위치 조절 가능
  • • 동적인 효과나 강조에 사용
  • • 조명 효과나 스포트라이트 구현
💡 디자인 팁
  • 보색이나 유사색을 사용하면 자연스러운 그라디언트 효과
  • 너무 많은 색상보다는 2-3개 색상이 깔끔함
  • 밝기 차이가 큰 색상은 중간 색상을 추가하여 부드럽게
  • 웹 접근성을 위해 텍스트와 충분한 대비 확보