최근 사용

    도구를 열면 여기에 표시됩니다.

    CSS 그라데이션 생성기

    미리보기로 아름다운 CSS 그라데이션을 만듭니다

    이 도구 공유

    문제 신고

    개인 입력 내용이나 파일은 포함하지 말고 문제를 설명해 주세요.

    이 도구는 얼마나 유용했나요?

    이 도구는 얼마나 유용했나요?

    그라데이션 설정

    색상 정지점

    색상 정지점 1

    색상 정지점 2

    프리셋 그라데이션

    그라데이션 팁

    선형 그라데이션은 방향에 따라 색이 부드럽게 바뀔 때 사용하세요.

    원형 그라데이션은 스포트라이트나 초점 효과를 만들 때 잘 어울립니다.

    원뿔형 그라데이션은 색상환이나 각도형 패턴에 적합합니다.

    색상 정지점 위치를 조정해 그라데이션의 색상 분포를 제어하세요.

    은은한 그라데이션에는 비슷한 색조를, 강렬한 효과에는 대비되는 색상을 사용하세요.

    실시간 미리보기

    CSS 단축 속성

    background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);

    CSS 속성

    background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);

    CSS 클래스

    .gradient-bg {
  background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}

    색상과 위치를 조정하세요. 작업하는 동안 미리보기가 갱신됩니다.

    CSS 그라데이션 생성기 소개

    무료 CSS 그라데이션 생성기로 모든 웹 프로젝트에 어울리는 아름답고 부드러운 색 전환을 쉽게 만들 수 있습니다. 선형 그라데이션, 원형 그라데이션, 원뿔형 그라데이션을 색상, 위치, 방향, 각도까지 완전히 제어하며 만들고 실시간 미리보기로 확인하세요.

    은은한 두 가지 색 배경이든 복잡한 다중 색상 정지점 그라데이션이든, 이 도구는 위치를 정밀하게 조절할 수 있는 색상 정지점을 최대 10개까지 제공합니다. 노을, 바다, 숲, 보랏빛 비 같은 프리셋 템플릿을 고르거나 무작위 생성기로 디자인에 쓸 독특한 그라데이션 색상 조합을 찾아보세요.

    생성기는 한 번의 클릭으로 복사하거나 PNG 이미지로 내려받을 수 있는 깔끔한 CSS 그라데이션 코드를 즉시 만들어 줍니다. background 단축 속성, background-image 속성, 바로 쓸 수 있는 CSS 클래스 등 여러 출력 형식을 제공합니다. 모든 처리는 브라우저에서 실행되며 서버 업로드는 필요하지 않습니다.

    디자인

    새로 추가됨

    모든 도구

    개인정보 설정

    분석, 광고, 맞춤 설정에 대한 환경설정을 선택하세요. 필수 저장소는 테마와 저장한 도구 같은 기능이 계속 작동하도록 합니다.

    필수 저장소는 항상 사용됩니다.