Softonic

CSS 그라데이션 생성기

단계 1 / 2
다음

그라데이션은 버튼, 카드, 히어로 섹션, 배지에 이미지 파일 하나 없이도 정돈된 느낌을 줄 수 있습니다. 이 생성기가 CSS를 대신 작성해 드립니다. 선형 또는 방사형 그라데이션을 고르고 두 가지 색상을 선택한 뒤, 필요하면 각도를 설정하고 완성된 background 선언을 스타일시트에 바로 복사하세요.

그라데이션 만드는 방법

  1. 1

    그라데이션 유형 선택

    각도를 따라 직선으로 변하는 선형, 또는 중심점에서 바깥으로 퍼지는 방사형을 선택합니다.

  2. 2

    두 가지 색상 선택

    두 색상 필드에 원하는 16진수 색상을 입력하세요 (예: #2563eb, #16a34a).

  3. 3

    각도 설정 (선형만 해당)

    각도는 도 단위입니다. 0deg는 위쪽, 90deg는 오른쪽, 180deg는 아래쪽을 가리킵니다. 방사형 그라데이션은 각도를 무시합니다.

  4. 4

    CSS 생성

    도구가 입력한 값으로 `background:` 선언을 만듭니다.

  5. 5

    코드 복사

    선언 한 줄을 복사해 스타일시트에서 스타일을 적용할 요소의 규칙 안에 붙여넣으세요.

선형 그라데이션

background: linear-gradient(135deg, #2563eb, #16a34a);

각도는 위에서부터 시계 방향으로 진행됩니다. 0deg = 위, 90deg = 오른쪽, 180deg = 아래, 270deg = 왼쪽. 이름이 있는 방향을 직접 쓸 수도 있습니다. to right는 90deg, to bottom left는 135deg와 같습니다.

방사형 그라데이션

background: radial-gradient(circle, #2563eb, #16a34a);

색상이 요소의 중심에서 바깥으로 퍼집니다. 방사형 그라데이션은 각도를 쓰지 않습니다. 더 세밀한 제어가 필요하면 위치나 크기 키워드를 직접 추가하세요 (at 30% 40%, ellipse).

색상 스톱

CSS 그라데이션은 두 가지 이상의 색상을 받을 수 있고 각 스톱에 위치를 지정할 수 있습니다.

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

같은 위치의 두 스톱은 하드 스톱을 만듭니다. 색상이 섞이지 않고 즉시 바뀝니다. 분할 배경에 유용합니다.

팁

  • 빨강에서 파랑으로 가는 그라데이션은 기본 sRGB 보간에서 중간이 회색빛으로 변합니다. oklch로 보간하면 혼합이 선명하게 유지됩니다. linear-gradient(in oklch, red, blue) (최신 브라우저 지원).
  • transparent는 무색이 아닙니다. sRGB에서 rgba(0,0,0,0)이므로 투명으로의 페이드는 어두운 회색을 통과합니다. 대신 rgba(color, 0)을 사용하세요.
  • 그라데이션은 최신 브라우저에서 GPU로 렌더링되므로 어떤 크기에서도 비용이 거의 없습니다. 그라데이션 간 애니메이션은 지원되지 않아 갑자기 바뀌므로, 대신 추가 레이어의 불투명도를 애니메이션하세요.
  • 텍스트 채우기: 선언을 background-clip: text; color: transparent;와 조합하면 텍스트를 그라데이션으로 채울 수 있습니다. 테두리에는 최신 브라우저에서 border-image: linear-gradient(...) 1;가 작동합니다.

자주 묻는 질문

위에서 아래로 또는 모서리에서 모서리로 흐르는 버튼이나 히어로 같은 방향성 혼합에는 선형을 쓰세요. 색상이 중심점에서 바깥으로 퍼지는 스포트라이트, 글로 효과에는 방사형이 좋습니다.

각도는 선형 그라데이션의 전환 방향을 정합니다. 0deg는 위쪽, 90deg는 오른쪽, 그리고 시계 방향으로 이어집니다. 방사형 그라데이션은 각도를 무시합니다.

기본 sRGB 보간이 색상 성분의 평균을 내어 채도가 낮은 중간점이 생기기 때문입니다. oklch로 보간하면 (linear-gradient(in oklch, red, blue)) 중간까지 선명한 혼합이 유지됩니다.

CSS는 두 background-image 값 사이를 보간할 수 없어 전환이 갑자기 일어납니다. 일반적인 해결책: 겹친 그라데이션의 불투명도를 애니메이션하거나, 더 큰 고정 그라데이션 위에서 background-position을 움직입니다.

관련 도구

ASCII 표 참조

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

FPS 카운터

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

HTML 문자 참조

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

색상 혼합기

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

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

색상 틴트 생성기

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

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