웹을 위한 CSS 그라데이션 만들기
이 생성기가 하는 일
CSS 그라데이션은 하나의 형태 위에서 두 가지 이상의 색을 서로 섞어 주는데, 이 생성기는 그 배색을 구문을 직접 쓰지 않고도 바로 붙여 넣을 수 있는 CSS로 만들어 줍니다. 그라데이션 종류를 고르고 색상 정지점을 추가하면 그에 맞는 background 규칙(linear-gradient() 또는 radial-gradient() 함수)이 자동으로 조립되고, 조작하는 순간마다 실시간 미리보기에 그대로 반영됩니다.
각 색상 정지점은 저마다의 색, 경로 위의 위치(퍼센트), 불투명도를 지니므로 한 색이 다음 색으로 넘어가는 지점을 정확히 정할 수 있습니다. 프리셋은 빈 캔버스가 아니라, 손보기만 하면 되는 완성된 팔레트를 건네줍니다.
언제 쓰면 좋은가
단색 채움이 밋밋해 보일 때 꺼내 쓰기 좋습니다. 히어로 배경, 버튼, 카드, 배지, 색을 덧입히는 오버레이는 은은한 색 전환만 더해도 훨씬 보기 좋아집니다. 디자이너는 몇 초 만에 느낌을 시안으로 잡을 수 있고, 개발자는 각도 키워드나 퍼센트 규칙을 외우지 않고도 올바른 구문을 바로 얻을 수 있습니다.
이미 있는 그라데이션을 다시 만들 때도 빛을 발합니다. 정지점을 하나씩 되짚어 만들고, 각도를 살짝 조정한 뒤, 그 결과를 스타일시트나 styled-component에 그대로 붙여 넣으면 됩니다.
예시: 선형 그라데이션
파란색에서 보라색으로 이어지는 대각선 페이드를 만든다고 해 봅시다. 종류를 선형으로 두고 첫 번째 정지점을 0%, 두 번째를 100%에 놓은 뒤 각도를 135deg로 설정합니다. 그러면 출력은 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);가 됩니다. 방사형으로 바꾸면 같은 두 정지점이 radial-gradient(circle, #3b82f6 0%, #8b5cf6 100%)로 표시되어, 선을 따라 흐르는 대신 중심에서 바깥으로 퍼집니다.
그라데이션 종류·정지점·주의할 점
선형 그라데이션은 각도나 방향을 지정한 직선을 따라 흐르고, 방사형 그라데이션은 중심점에서 퍼지며 형태(circle 또는 ellipse), farthest-corner 같은 크기, 조절 가능한 X/Y 위치를 가집니다. 정지점을 셋 이상 추가하면 여러 색의 띠가 만들어지고, 두 정지점을 같은 위치에 두면 부드러운 섞임 대신 뚜렷한 색 경계가 생깁니다. 불투명도를 100% 아래로 낮추면 그라데이션을 사진이나 다른 레이어 위에 겹칠 수 있습니다. 결과가 마음에 들면 CSS를 복사하거나 내려받아 프로젝트에 옮기면 됩니다.