Softonic

CSS 그라데이션 생성기

단계 1 / 3
유형
다음

현대 UI 배경은 단색을 거의 쓰지 않습니다, 히어로 섹션, 버튼, 카드 거의 모두가 CSS 그라데이션을 사용합니다. 이 생성기로 선형 또는 방사형을 고르고, 원하는 만큼 색상 스톱을 넣고, 각도(선형용)나 모양(방사형용)을 설정한 뒤, 스타일시트에 바로 붙여넣을 깔끔한 background: linear-gradient(…) 값을 복사하세요.

CSS 그라데이션 만드는 방법

  1. 1

    그라데이션 타입 선택

    선형(각도로 방향) 또는 방사형(원/타원).

  2. 2

    각도 또는 모양 설정

    선형: 0–360°. 방사형: 원 또는 타원.

  3. 3

    색상 스톱 추가

    각 스톱은 색상과 위치(0–100%)입니다. 두 스톱 그라데이션이 기본이고, 세 스톱 이상은 더 매끄러운 전환을 줍니다.

  4. 4

    CSS 복사

    출력은 어떤 CSS 파일에든 붙여넣을 수 있는 단일 `background` 속성 값입니다.

문법 치트시트

/* 선형 */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* 방사형 (원) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* 다중 스톱 */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

직관과 실제로 맞는 각도

CSS 그라데이션 각도는 삼각법과 다릅니다: 0deg는 위(북)를, 90deg는 오른쪽(동)을, 180deg는 아래, 270deg는 왼쪽을 가리킵니다.

방향 각도
위에서 아래로 180deg
아래에서 위로 0deg
왼쪽에서 오른쪽으로 90deg
좌상단에서 우하단으로 135deg

탁한 중간톤 피하기

보색 사이(예: 파랑 → 주황)의 선형 그라데이션은 50% 부근에서 혼합이 “죽은” 느낌의 회색 띠를 지납니다. 해결법:

  • 관련 색조에 중간 스톱 추가(파랑 → 보라 → 주황).
  • 지각적으로 더 매끄러운 혼합을 위해 OKLCH 보간(linear-gradient(in oklch, ...)) 사용, 2024년 기준 모든 현대 브라우저에서 지원.
  • 중간톤이 더 따뜻한 계열에 놓이도록 한 끝점의 색조를 약간 이동.

성능 팁

그라데이션은 GPU가 그리며 보통 저렴합니다. 그것을 애니메이션하면(background-position 트릭, SVG 블러) 여전히 페인트 비용에 부딪힐 수 있습니다, 출시 전에 중급 폰에서 테스트하세요.

자주 묻는 질문

CSS 그라데이션은 위에서 시계 방향으로 각도를 측정하는 반면, 표준 수학은 오른쪽에서 반시계 방향으로 측정합니다. CSS의 90deg는 오른쪽을 가리키고, 삼각법에서는 그것이 0°입니다.

명세는 임의의 수를 허용합니다. 실용적으로 4~5개를 넘는 스톱은 무지개처럼 느껴지는 경향이 있습니다. 잘 고른 두세 개의 스톱이 거의 항상 더 깔끔해 보입니다.

네, 임의 값으로 붙여넣으세요: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". 재사용 가능한 그라데이션은 Tailwind 설정에 커스텀 유틸리티를 정의하세요.

일반 편집기는 미리 보기를 렌더링하기 위해 그라데이션 설정을 서버로 전송합니다. 안내형 흐름에서는 유형, 각도, 모양, 색상 스톱도 페이지 URL에 표시됩니다. 민감한 정보는 입력하지 마세요. 이 도구는 재사용 가능한 그라데이션 프로젝트를 저장하지 않습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다