본문으로 건너뛰기
AZ Tools

CSS 그라디언트 생성기

선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.

종류

색상 스톱

  • 0%
  • 100%
미리보기
CSS
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Tailwind
bg-[linear-gradient(135deg,_#3b82f6_0%,_#8b5cf6_100%)]

사용법

  1. 선형 또는 방사형을 고르세요.
  2. 각도(선형)나 형태(방사형)를 조정하세요.
  3. 색상 스톱을 편집하고 위치 슬라이더를 움직이세요.
  4. CSS 규칙이나 Tailwind 클래스를 복사하세요.

자세한 설명

펼치기

선형 또는 방사형 CSS 그라디언트를 시각적으로 디자인하세요. 종류를 고르고 각도나 모양을 설정한 뒤 색상 정지점을 원하는 만큼 추가하고 위치를 끌어 옮기면 미리보기가 실시간으로 갱신됩니다. 규칙을 만들기 전에 정지점을 위치 순으로 정렬하므로 어떤 순서로 추가해도 올바른 CSS가 나옵니다. 선형 그라디언트는 수학 좌표계가 아니라 CSS의 각도 규칙을 따르며, 0deg가 위쪽을 가리키고 시계 방향으로 돌아갑니다. 방사형은 원 또는 타원 중에서 고를 수 있습니다. 결과는 일반 CSS 규칙으로 복사하거나, 클래스 이름이 파서를 통과하도록 공백을 밑줄로 바꾼 Tailwind 임의값 클래스로 복사할 수 있습니다.

자주 묻는 질문

Tailwind 임의값은 왜 쓰나요?

bg-[…] 형태의 Tailwind 임의값 클래스를 쓰면 별도 CSS 파일 없이 Tailwind 프로젝트에 그라디언트를 바로 적용할 수 있습니다.

색상 스톱은 몇 개까지 가능한가요?

원하는 만큼 추가할 수 있습니다. 일반적으로 3–5개가 보기 좋지만 수에 제한이 없습니다.

그라디언트가 저장되나요?

마지막 디자인이 브라우저 로컬 저장소에 자동 저장되어 다음 방문 때 복원됩니다.

왜 Tailwind 클래스에 밑줄이 있나요?

Tailwind는 공백을 클래스 구분자로 취급하므로 임의값에서는 공백 대신 밑줄을 사용합니다.

정지점을 추가한 순서가 결과에 영향을 주나요?

아닙니다. 규칙을 만들기 전에 위치 순으로 정렬하므로, 80%짜리를 먼저 넣고 20%짜리를 나중에 넣어도 올바른 CSS가 나옵니다. 색이 어디에 놓일지는 위치가 결정하며, 편집기의 줄 순서는 보기 편하라고 있는 것일 뿐입니다.

0deg는 어느 쪽을 가리키나요?

위쪽입니다. CSS는 그라디언트가 향하는 방향을 기준으로 각도를 재며, 위에서 시작해 시계 방향으로 돕니다. 그래서 90deg는 왼쪽에서 오른쪽으로 흐릅니다. 수학의 관례는 오른쪽에서 시작해 반시계 방향으로 도는데, 디자인 도구에서 복사한 그라디언트가 이따금 돌아간 채로 도착하는 이유가 이것입니다.

이 주제의 가이드

관련 도구

Conic Gradient 생성기

CSS conic-gradient() 비주얼 빌더 — 회전 각도·중심 위치·컬러 스톱·도형 미리보기. 파이 차트·링 차트·체커보드 패턴·컬러 휠에 유용.

색상·CSS

컬러 토큰 익스포터

컬러 팔레트 한 번 정의 → CSS 커스텀 프로퍼티·Tailwind 설정·SCSS·LESS·디자인 토큰 JSON·SwiftUI Color·Android colors.xml로 익스포트. 라이브 미리보기 스워치.

색상·CSS

색상 이름 찾기

임의의 hex/RGB 색상에 가장 가까운 CSS·Tailwind·XKCD 색상 이름을 OKLab 인지 거리 기준으로 정렬해 표시.

색상·CSS

CSS 블렌드 모드 시뮬레이터

W3C 컴포지팅 표준의 16 가지 mix-blend-mode(multiply·screen·overlay·soft-light·hue·color·luminosity 등)를 두 색에 적용한 결과를 한눈에 비교하고, 각 모드별 CSS 스니펫을 복사할 수 있습니다.

색상·CSS

컬러 믹서

두 색상을 RGB·HSL·CIELAB 공간에서 보간. 11단계 중간 그라데이션 스트립 표시.

색상·CSS

컬러 보간 / 그라데이션 스텝

두 헥스 컬러 → N개 이산 중간 스텝 — sRGB·linear RGB·OKLab·HSL — 옵션 이징.

색상·CSS

CSS Box Shadow 생성기

여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.

색상·CSS