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 표.

키보드 단축키 참고표

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

HTML 문자 참조

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

보색 찾기

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

랜덤 영어 글자 생성기

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

랜덤 색상 팔레트 생성기

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