그라데이션 만들기
로컬 처리CSS gradient 생성
사용 방법과 처리 기준
CSS gradient 생성
도구의 계산과 파일 처리는 브라우저 안에서 이루어집니다. 계산기·단위 변환의 공유 링크를 직접 만들면 값이 URL에 포함됩니다. 계정·방문 통계·광고 관련 정보 처리는 개인정보처리방침을 확인하세요.
현재 제한
- 최대 입력 길이 100,000자
"작업"에서 두 색, 선형(여러 색), 원형(여러 색)을 고르면 바로 붙여 쓸 수 있는 background 선언을 만들어 줍니다. 여러 색은 "색 위치%"를 한 줄에 하나씩 적습니다.
이 도구로 할 수 있는 일
- 두 색
- 시작·끝 색과 각도로 선형 그라데이션을 만듭니다.
- 선형(여러 색)
- 색 정지점 여러 개와 각도를 씁니다.
- 원형(여러 색)
- circle·ellipse 모양의 radial-gradient를 만듭니다.
그라데이션 만들기 사용 방법
- 1작업 고르기두 색·선형·원형 중 고릅니다.
- 2색 입력색을 고르거나 "#3366cc 0%"처럼 줄마다 적습니다.
- 3CSS 복사만들어진 background 선언을 복사합니다.
활용 예시
두 색, 90도
입력: #3366cc → #cc3366, 90°
결과: background: linear-gradient(90deg, #3366cc 0%, #cc3366 100%);
원형
입력: #ffffff 0%
#3366cc 100%, circle
결과: background: radial-gradient(circle, #ffffff 0%, #3366cc 100%);
이럴 때 유용해요
- 버튼·배너 배경 그라데이션을 만들 때
- 디자인 시안의 그라데이션을 CSS로 옮길 때
자주 묻는 질문 (FAQ)
각도 0도는 어느 방향인가요?
CSS에서 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 흐릅니다.