CSS 그라데이션 생성기

히어로 배경, 버튼 강조, 카드의 깊이, 일러스트 보조까지 그라데이션은 단조로운 면을 살리는 가장 빠른 방법입니다. 색 두 개만 잘 골라도 한 톤짜리 배경보다 훨씬 풍성한 인상을 주고, stop을 늘리면 분위기 있는 표정까지 만들 수 있습니다.

결과가 어색하다면 색을 바꾸기 전에 각도와 위치부터 조정해 보세요. 비슷한 명도끼리는 부드럽게, 명도 차이가 큰 색끼리는 또렷한 인상이 됩니다. 색 사이에 흙탕물처럼 회색이 끼면 중간 stop을 추가해 두 색의 경계를 잡아 주는 것이 좋습니다.

이 도구는 모든 처리를 브라우저 안에서 끝냅니다. 입력한 색이 어디로도 전송되지 않으며, 만들어진 CSS는 그대로 복사해 어떤 프로젝트에도 붙여 넣을 수 있습니다. linear-gradient와 radial-gradient는 모든 현대 브라우저에서 동일하게 동작합니다.