CSS 그라데이션 생성기
두 가지 이상의 색을 부드럽게 잇는 linear, radial 그라데이션을 만들고 CSS 한 줄로 복사하세요. 색과 위치, 각도를 미리보기로 즉시 조정할 수 있고 모든 처리는 브라우저 안에서 끝납니다.
미리보기
종류
deg
색상 지점
- 1%
- 2%
CSS 출력
background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);프리셋
코드 그대로 쓸 수 있는 그라데이션을 빠르게 만들기
히어로 배경, 버튼 강조, 카드의 깊이, 일러스트 보조까지 그라데이션은 단조로운 면을 살리는 가장 빠른 방법입니다. 일러스트레이터나 포토샵에서 만든 그라데이션의 각도와 색을 옮겨 적고 싶을 때도 미리보기와 CSS 출력을 보며 그대로 재현할 수 있습니다. 색 두 개만 잘 골라도 한 톤짜리 배경보다 훨씬 풍성한 인상을 주고, stop을 늘리면 분위기 있는 표정까지 만들 수 있습니다.
결과가 어색하다면 색을 바꾸기 전에 각도와 위치부터 조정해 보세요. 비슷한 명도끼리는 부드럽게, 명도 차이가 큰 색끼리는 또렷한 인상이 됩니다. 색 사이에 흙탕물처럼 회색이 끼면 중간 stop을 추가해 두 색의 경계를 잡아 주는 것이 좋습니다.
이 도구는 모든 처리를 브라우저 안에서 끝냅니다. 입력한 색이 어디로도 전송되지 않으며, 만들어진 CSS는 그대로 복사해 어떤 프로젝트에도 붙여 넣을 수 있습니다. linear-gradient와 radial-gradient는 모든 현대 브라우저에서 동일하게 동작합니다.
같이 쓰기 좋은 도구
현재 작업과 이어서 쓰기 쉬운 도구를 모았습니다.