랜덤 그라데이션 생성기
두 가지 또는 세 가지 색상의 CSS 선형 그라데이션을 무작위로 만들고 HEX 색상과 각도를 편집하세요. 미리보기 후 CSS를 복사하거나 다운로드할 수 있습니다.
함께 사용하면 좋은 도구: 웹사이트 배색 미리보기 , 읽기 쉬운 글자색 생성기 , 랜덤 5색 팔레트 생성기 외 더 많은 도구
0°부터 360°까지 정수를 선택하세요. 0°는 위쪽, 90°는 오른쪽 방향입니다.
현재 각도를 유지하면서 새 색상을 생성합니다. 색상이나 각도를 수정하면 미리보기와 CSS가 바로 바뀝니다.
그라데이션 미리보기
CSS 배경 코드
.gradient {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}랜덤 CSS 그라데이션 만드는 방법
- 2색 또는 3색을 선택하고 각도를 0°부터 360°까지 설정하세요.
- 색상을 무작위로 생성하거나 색상 선택기 또는 3자리·6자리 HEX 값으로 직접 지정하세요.
- 배경을 확인한 뒤 CSS를 복사하거나 random-gradient.css를 다운로드하세요. HTML 요소에 gradient 클래스를 적용하면 됩니다.
웹사이트 배경 활용 예시
- 파란색과 보라색의 2색 그라데이션으로 랜딩 페이지의 메인 배경을 만드세요.
- 3색 그라데이션을 프레젠테이션 카드, 대시보드 헤더 또는 포트폴리오 섹션에 사용하세요.
- 브랜드 색상을 유지하고 각도만 바꿔 배경 방향에 따른 효과를 비교하세요.
자주 묻는 질문
무작위로 생성한 뒤에도 수정할 수 있나요?
네. 입력란이나 색상 선택기로 각 HEX 색상을 바꾸고 각도를 조절할 수 있습니다. 미리보기와 CSS에는 항상 같은 설정이 적용됩니다.
어떤 색상 형식과 그라데이션을 지원하나요?
불투명한 CSS 선형 그라데이션을 지원하며 두 가지 또는 세 가지 색상을 같은 간격으로 배치합니다. 3자리·6자리 HEX 색상을 사용할 수 있습니다. 투명도, 방사형 그라데이션, 색상 위치 지정은 지원하지 않습니다.
올바르지 않은 색상이나 각도를 입력하면 어떻게 되나요?
오류 안내가 나타나고 이전 미리보기와 CSS가 지워집니다. 올바른 값으로 수정할 때까지 복사와 다운로드를 사용할 수 없습니다.
웹사이트에 바로 사용할 수 있나요?
네. .gradient 규칙을 스타일시트에 복사하고 요소에 class="gradient"를 추가하세요. 다운로드 파일에도 화면에 표시된 것과 같은 규칙이 포함됩니다.
색상 생성과 편집은 브라우저에서 처리됩니다. 도구는 HEX 값이나 생성된 CSS를 서버로 보내지 않습니다. 일반적인 사이트 광고와 방문 분석 서비스는 로드될 수 있습니다.
유용한 도구를 함께 사용하는 사람에게 공유하세요.
도구가 도움이 되었나요? 또는 으로 의견을 남겨 주세요.