CSS 그라데이션 생성기
개인정보 보호 설계 — 브라우저에서 모두 처리됩니다
브라우저에서 선형 및 방사형 CSS 그라데이션을 시각적으로 구성합니다. Toova를 사용하면 색상 정지점을 배치하고, 각도를 조정하고, 유형을 전환하고, 바로 붙여 넣을 수 있는 CSS를 내보낼 수 있습니다. 모두 서버에 어떤 것도 업로드하지 않고 말입니다.
선형, 방사형, 원뿔형 그라데이션
선형 그라데이션은 각도 또는 방향 키워드로 정의된 직선 축을 따라 이동합니다. 방사형 그라데이션은 중심점에서 확장됩니다. 원뿔형 그라데이션은 각도를 중심으로 휩쓸며, 파이 차트 스타일 배경이나 색상 휠 효과에 완벽합니다. Toova는 시각적 컨트롤로 세 가지 모두를 노출하므로 CSS 구문의 모든 변형을 외우지 않고도 원하는 그라데이션을 구성할 수 있습니다.
색상 정지점 및 이징
그라데이션 바를 따라 색상 정지점을 드래그하여 각 색상이 시작하고 끝나는 위치를 제어합니다. 필요한 만큼 많은 정지점을 추가하십시오. Toova는 제한하지 않습니다. 이징 사전 설정을 사용하여 비선형 보간을 도입하면 간단한 두 색상 그라데이션을 괴롭히는 흐릿한 회색 중간을 피할 수 있습니다. CSS 출력은 모든 최신 브라우저에서 지원되는 표준 속성을 사용합니다.
브라우저 전용 생성
모든 그라데이션은 브라우저에서 로컬로 생성됩니다. 선택한 색상, 배치한 정지점, 출력 CSS 어느 것도 페이지를 떠나지 않습니다. 그라데이션에 대해서는 과도하지만, 도구가 빠르고 안정적이며 첫 로드 후 페이지가 오프라인에서 작동함을 의미합니다. 사용 중 네트워크 탭은 비어 있습니다.
자주 묻는 질문
- 원뿔형 그라데이션을 언제 사용해야 합니까?
- 원뿔형 그라데이션은 파이 차트 효과, 색상 휠, 추상적인 회전 배경에 완벽합니다. 그것들은 중심점을 중심으로 휩쓸며, 이는 선형이나 방사형 그라데이션이 할 수 없는 것입니다. 브라우저 지원이 이제 최신 엔진 전반에 걸쳐 견고합니다.
- 두 색상 그라데이션에서 흐릿한 중간을 어떻게 피합니까?
- 지각적으로 균형 잡힌 색상의 중간 정지점을 추가하거나, 명도가 비슷한 색상을 선택하십시오. RGB 중간점을 통해 보색을 혼합하면 회색이 생성됩니다. OKLCH에서 중간점을 수동으로 선택하면 이를 피할 수 있습니다.
- 다른 형식으로 내보낼 수 있습니까?
- 출력은 표준 CSS이며, 모든 웹 컨텍스트에서 직접 작동합니다. 디자인 도구의 경우 개별 색상 정지점을 복사하고 Figma 또는 Sketch에서 그라데이션을 복제하십시오.
- 투명도를 지원합니까?
- 예. 모든 색상 정지점은 알파 채널을 가질 수 있습니다. 가장자리를 배경으로 페이드하거나 반투명 정지점이 있는 그라데이션을 레이어링하는 데 유용합니다.
- 제 데이터가 어디로든 전송됩니까?
- 아니요. 생성은 전적으로 브라우저에서 실행됩니다.