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에 표시됩니다. 민감한 정보는 입력하지 마세요. 이 도구는 재사용 가능한 그라데이션 프로젝트를 저장하지 않습니다.

관련 도구

2진수 8진수 변환기

비트를 세 개씩 묶어 2진수를 8진수로 변환합니다. Unix 권한, 레거시 시스템, 간결한 숫자 표시에 유용합니다.

BBCode → HTML 변환기

BBCode(게시판 마크업)를 깔끔한 HTML로 변환합니다. 서식 태그, 목록, 인용, 코드, 이미지, 링크, 표를 처리합니다.

Base64 → Hex 변환기

Base64 문자열을 실제 바이트로 디코딩한 뒤 16진수로 표현합니다. 토큰, 키, 인증서, JWT를 살펴볼 때 유용합니다.

불 대수 간소화 도구

Karnaugh map과 Quine-McCluskey 알고리즘으로 불 대수 식을 간소화합니다. 모든 최소화 단계와 최종 SOP/POS 형태를 보여줍니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.