6XC

CSS 그라데이션 생성기

실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요.

조회수 1,196회

CSS 그라데이션이란

그라데이션은 색상 사이를 부드럽게 이어주는 표현으로, linear-gradient(각도, 색상1, 색상2), radial-gradient(...), conic-gradient(...)로 작성합니다. 유형과 각도, 최대 3가지 색상을 선택하면 미리보기와 복사할 수 있는 CSS가 즉시 업데이트됩니다. 그라데이션은 브라우저가 직접 렌더링하므로 이미지 다운로드가 필요 없고, 어떤 크기에서도 선명하게 표시됩니다.

자주 묻는 질문

선형 그라데이션에서 각도는 무엇을 의미하나요?

0°는 위쪽, 90°는 오른쪽, 180°는 아래쪽을 가리키며, 각도는 그라데이션이 진행하는 방향을 나타냅니다. 135°로 설정하면 인기 있는 왼쪽 위에서 오른쪽 아래로 향하는 대각선이 됩니다.

radial과 conic은 언제 사용해야 하나요?

radial은 중심에서 바깥쪽으로 색이 퍼지며, 스포트라이트나 비네트 효과에 적합합니다. conic은 색상환처럼 중심을 기준으로 회전하며, 원형 차트나 무지개 링에 적합합니다.

댓글

아직 댓글이 없습니다 — 첫 댓글을 남겨보세요!

비슷한 도구

CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기 CSS 글래스모피즘 생성기 실시간 미리보기로 유리(글래스모피즘) 효과를 디자인하세요 — 흐림, 투명도, 색조, 테두리를 조절하고 CSS를 복사하세요. 생성하기