Developer Design Utility
CSS Gradient 생성기
색상, 방향, 그라데이션 타입을 선택해 CSS background 코드를 만들고 미리보기까지 확인할 수 있습니다.
그라데이션 생성
linear, radial gradient CSS 코드 생성
실시간 미리보기
선택한 색상과 방향을 즉시 반영
복사·다운로드
CSS 코드 복사와 파일 저장 지원
Gradient 설정
색상과 방향을 선택해 원하는 CSS Gradient를 만들어보세요.
선형 또는 원형 그라데이션을 선택합니다.
0°
135°
360°
시작 색상입니다.
끝 색상입니다.
0%
0%
100%
0%
100%
100%
추천 프리셋
Preview
CSS Gradient
실시간 배경 미리보기
Type
linear
Angle
135°
Colors
2
생성 결과
아래 코드를 CSS 파일 또는 style 속성에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
CSS Gradient란?
CSS Gradient는 이미지 파일 없이 CSS만으로 색상이 자연스럽게 이어지는 배경을 만드는 기능입니다. 버튼, 카드, 배너, 썸네일 배경 등에 자주 사용됩니다.
사용 예시
- 버튼 배경: CTA 버튼이나 강조 버튼에 사용
- 카드 배경: 유틸리티 카드, 소개 박스, 요약 박스에 사용
- 히어로 영역: 랜딩 페이지 상단 배경에 사용
팁
텍스트 위에 그라데이션 배경을 사용할 때는 글자 대비가 충분한지 확인하는 것이 좋습니다. 밝은 배경에는 어두운 글자, 어두운 배경에는 흰색 글자를 사용하는 방식이 안전합니다.