Handytool
개발자무료로컬에서 실행

CSS 그라데이션 생성기

선형, 방사형, 원뿔형 CSS 그라데이션을 구축합니다——색상 중지를 끌고, 색상을 선택하고, CSS를 복사합니다.

미리보기
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
유형
사전 설정

최대 6 개의 색상 중지점을 추가하고 위치 슬라이더를 드래그 한 후 CSS를 복사합니다.

CSS 그라데이션 생성기 소개

Handytool의 CSS 그라데이션 생성기는 최대 6개의 색상 중지로 선형, 방사형, 원뿔형 그라데이션을 구축합니다. 색상 중지의 위치를 끌고, 색을 변경하고, 그라데이션 유형을 전환하면 실시간 미리보기 및 CSS 선언이 즉시 업데이트됩니다. 기본 제공 미리 설정 중 하나부터 시작합니다——Lime Swiss, Sunset, Sky, Aurora——또는 처음부터 설계합니다.

CSS 그라데이션 생성기 기능

  • 01

    선형, 방사형, 원뿔형

    선형은 일반적인 배경 그라데이션입니다. 방사형은 하이라이트 및 비네트에 좋습니다. 원뿔형은 원형 차트, 색상 휠, 회전 배경에 완벽합니다.

  • 02

    최대 6개의 색상 중지

    색상 중지를 추가 및 제거하고, 슬라이더로 각 위치를 설정하고, 시스템 색상 선택기 또는 16진수 값으로 색상을 선택합니다. 색상 중지는 위치에 따라 자동으로 재정렬됩니다.

  • 03

    복사 가능한 CSS 선언

    출력은 완전한 background: ... 선언으로, 스타일시트, 스타일 지정된 구성 요소 또는 Tailwind 임의 값 클래스에 직접 붙여넣을 수 있습니다.

CSS 그라데이션 생성기 자주 묻는 질문

선형, 방사형, 원뿔형의 차이는 무엇입니까?
선형 그라데이션은 주어진 각도에서 직선을 실행합니다. 방사형은 중심에서 바깥쪽으로 퍼집니다. 원뿔형은 시침처럼 점을 중심으로 회전합니다. 각각은 다른 시각 효과에 적합합니다.
몇 개의 색상 중지를 사용해야 합니까?
2개 중지는 고전적인 2색 그라데이션입니다. 3개 또는 4개는 현실적인 전환(일몰, 오로라)을 만들 수 있습니다. 6개 이상은 시끄러워 보입니다——이것이 이 생성기가 6개로 제한되는 이유입니다.
이메일 템플릿의 배경에 사용할 수 있습니까?
대부분의 이메일 클라이언트는 여전히 최신 CSS 그라데이션을 안정적으로 지원하지 않습니다——이를 이메일 템플릿에 복사하는 경우 배경 그라데이션에 추가로 단색 대체를 제공합니다.
출력이 픽셀 정확합니까?
예——미리보기는 브라우저의 기본 그라데이션 엔진으로 렌더링되므로 보이는 내용이 CSS가 생성하는 내용입니다.

관련 도구

개발자 →

다른 도구 둘러보기

모든 도구 →