사용 방법
- 그라데이션 탭 또는 버튼 탭을 선택합니다.
- 컨트롤을 조절하며 실시간 미리보기를 확인합니다. 그라데이션은 색, 각도, 종류를, 버튼은 텍스트, 색, 패딩, 모서리 반경을 조절합니다.
- 코드 블록 위의 복사 아이콘을 클릭하고 스타일시트에 붙여넣습니다.
그라데이션 탭은 두 가지 색으로 배경을 만듭니다. 선형과 원형 그라데이션 중에서 고를 수 있습니다. 선형 그라데이션에는 0~360도 각도 슬라이더가 있습니다. 원형을 선택하면 첫 번째 색에서 두 번째 색으로 이어지는 원형 그라데이션이 만들어집니다. 미리보기 아래의 코드는 각도와 두 색 정지점이 있는 linear-gradient 같은 단일 background 선언으로, 바로 붙여넣어 쓸 수 있습니다.
버튼 탭은 custom-button이라는 클래스에 대한 완전한 규칙을 출력합니다. 미리보기에 쓸 라벨 텍스트, 배경색, 글자색, 가로·세로 패딩(각각 0~100px), 모서리 반경(0~50px)을 설정합니다. 생성된 CSS에는 선택한 색, 패딩, 반경과 함께 테두리 없음, 포인터 커서, 중간 굵기 글꼴, 짧은 불투명도 전환, 불투명도를 살짝 낮추는 호버 규칙이 포함됩니다.
색은 색상 컨트롤로 고르거나 텍스트로 입력할 수 있습니다. 출력은 벤더 접두사나 프레임워크 없는 일반 CSS이므로 어떤 프로젝트에서도 쓰고 추가로 수정할 수 있습니다. 이 도구는 색 정지점이 두 개를 넘는 그라데이션을 지원하지 않습니다.
서버로 전송되는 것은 없습니다. 미리보기와 코드는 입력하는 동안 브라우저에서 생성됩니다.
자주 묻는 질문
세 가지 이상의 색으로 그라데이션을 만들 수 있나요?
아니요. 이 도구는 두 가지 색을 사용합니다. 복사한 CSS를 수정해 정지점을 더 추가할 수 있습니다.
각도 컨트롤은 어떤 역할을 하나요?
선형 그라데이션의 방향을 도 단위로 정합니다. 항상 원형인 원형 그라데이션에서는 숨겨집니다.
버튼 CSS의 클래스 이름은 무엇인가요?
생성되는 규칙은 custom-button 클래스를 사용하며, 프로젝트에 맞게 이름을 바꿀 수 있습니다.
버튼에 호버 스타일이 추가되나요?
네. 복사한 CSS에는 불투명도를 0.9로 설정하는 호버 규칙이 포함됩니다.
입력한 내용이 업로드되나요?
아니요. CSS는 브라우저에서 만들어집니다.