CSS 그라디언트 생성기

브라우저에서 선형, 방사형 및 코닉 CSS 그라디언트를 만들 수 있습니다.

색상 중단점

정지점 핸들이나 키보드 화살표를 사용하여 위치를 편집합니다. 각 정지점에는 명시적인 색상, 불투명도 및 백분율이 포함됩니다.

준비 완료

브라우저 자체 로컬 처리

그라데이션은 이 브라우저에 남아 있습니다. 색상이나 생성된 CSS는 Convertr로 전송되지 않습니다.

제한된 가져오기 문법

가져오기는 16진수 색상 및 백분율과 함께 linear-gradient(), radial-gradient() 또는 conic-gradient()를 허용합니다. 선언, URL, 변수 및 알 수 없는 함수는 로컬에서 거부됩니다.

접근 가능한 대체 색상

생성된 CSS에는 지원되지 않는 렌더러와 접근 가능한 제어 크롬을 위한 그라데이션과 함께 단색 배경색 폴백이 포함됩니다.

자주 묻는 질문

내 그라디언트가 업로드되었습니까?

아니요. 그라데이션 상태, 색상, 가져온 CSS 및 생성된 CSS는 브라우저에 남아 있습니다.

어떤 CSS 그라데이션 유형이 지원되나요?

생성기는 여러 16진수 색상 정지점을 사용하여 linear-gradient(), radial-gradient() 및 conic-gradient() 출력을 생성합니다.

무엇을 가져올 수 있나요?

가져오기는 하나의 지원되는 그라디언트 함수, 16진수 색상, 선택적 백분율 및 제한된 각도 또는 위치 값을 사용하여 의도적으로 제한된 문법을 허용합니다.

CSS 그라디언트 생성기

선형 또는 방사형 CSS 그라데이션을 구축하고 색상 중단점, 각도, 위치 및 반복을 미리 봅니다.

입력
그라데이션 유형, 색상 중단점, 위치, 각도 및 반복 설정.
출력
라이브 프리뷰 및 복사 가능한 CSS 배경 선언.
실제 제한
브라우저 렌더링은 엔진에 따라 약간 다를 수 있으며, 도구는 레거시 브라우저에서 대비 또는 지원을 평가하지 않습니다.
개인정보 및 데이터 처리
그라데이션 유형, 색상 중단점, 위치, 각도 및 반복 설정이 이 브라우저 탭에서 처리됩니다. Convertr는 이를 수신하거나 저장하지 않습니다. 도구가 명시적으로 로컬 다운로드를 제공하지 않는 한 페이지를 닫거나 다시 로드하면 작업 상태가 지워집니다.

이 도구를 어떻게 사용해야 하는지

  1. 도구 컨트롤에서 그라데이션 유형, 색상 중단점, 위치, 각도 및 반복 설정을 제공합니다.
  2. 라이브 프리뷰 및 복사 가능한 CSS 배경 선언에 영향을 미치는 설정을 선택한 다음 도구를 실행합니다.
  3. 복사하거나 다운로드하기 전에 라이브 사전 보기 및 복사 가능한 CSS 배경 선언을 검토합니다.

일반적인 실패 모드

색상 중지 누락, 잘못된 색상 또는 호환되지 않는 위치로 인해 유효한 CSS 선언을 작성할 수 없습니다.

유용한 예제

#111827(0%)에서 #f59e0b(100%)까지 90도 선형 그라데이션을 만들고 선언문을 복사합니다.