생성기CSS 그라디언트 생성

CSS 그라데이션 생성기linear-gradient 코드 만들기

색과 각도를 고르면 CSS linear·radial·conic gradient 코드를 바로 만들어 복사하는 온라인 그라데이션 생성기입니다.

CSS 그라디언트 생성 사용법

CSS 그라디언트를 눈으로 만들고 코드를 복사합니다. 배경이나 버튼에 쓸 그러데이션을 만들 때 씁니다.

  1. 색을 정합니다

    시작색과 끝색을 고르고 중간 색을 더할 수 있습니다.

  2. 방향과 종류를 고릅니다

    직선(linear)과 원형(radial) 중 고르고 각도를 조절합니다.

  3. 코드를 복사합니다

    background 속성에 그대로 넣을 수 있는 CSS 가 나옵니다.

자주 묻는 질문

그라디언트에 띠가 보여요
비슷한 색끼리 이어질 때 계단처럼 보이는 현상입니다. 중간 색을 하나 더 넣거나 색 차이를 조금 키우면 부드러워집니다.
각도는 어떻게 읽나요?
0도는 아래에서 위로, 90도는 왼쪽에서 오른쪽으로 향합니다. 시계 방향으로 늘어납니다.

생성기 다른 도구