언제 유용한가요?
히어로 섹션이나 버튼 배경에 은은한 색상 전환 효과를 넣고 싶을 때, 두 색상의 조합과 방향을 눈으로 보며 결정하고 싶을 때 유용합니다.
Gradient Generator
Create linear-gradient CSS from two colors and an angle.
사용 가이드
그라디언트 생성기 사용 가이드
그라디언트 생성기는 두 가지 색상과 각도를 조절해 배경에 바로 쓸 수 있는 CSS linear-gradient 코드를 즉시 만들어주는 도구입니다.
사용 방법
- 색상 선택기 두 개로 시작 색과 끝 색을 고릅니다.
- 각도 슬라이더로 그라디언트가 흐르는 방향을 정합니다.
- 미리보기를 확인한 뒤 생성된 linear-gradient 코드를 복사합니다.
알아두면 좋은 점
각도 0도는 아래에서 위로, 90도는 왼쪽에서 오른쪽으로 흐르는 방향을 뜻합니다. CSS의 to right, to bottom 같은 키워드 대신 각도로 지정하면 원하는 방향을 더 세밀하게 조절할 수 있습니다.
데이터 처리 안내
그라디언트 계산은 브라우저 안에서 즉시 이루어지며 선택한 색상 값이 서버로 전송되지 않습니다.
자주 묻는 질문
색상을 세 개 이상 넣는 그라디언트도 만들 수 있나요?
이 도구는 두 색상 사이의 그라디언트를 만드는 데 초점을 맞췄습니다. 세 가지 이상의 색을 쓰고 싶다면 생성된 코드를 참고해 linear-gradient 안에 색상과 위치를 추가로 입력하면 됩니다.
radial-gradient(원형 그라디언트)도 만들 수 있나요?
아니요, 현재는 linear-gradient(선형 그라디언트)만 지원합니다. 원형 그라디언트가 필요하다면 생성된 색상 값을 참고해 직접 radial-gradient 코드를 작성해야 합니다.