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

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

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