본문으로 건너뛰기
Toolars
둘러보기
버그 신고

디자인 · 로컬 유틸리티

CSS 그라데이션 생성기

CSS Gradient Generator

명시적 각도, 초점, 색 중지점으로 선형·방사형 그라데이션을 구성하고 background 선언 한 줄로 복사합니다.

작업 경로 / 입력에서 결과까지

그라데이션 유형 선택하기

로컬에서 실행 · 업로드 없음

CSS 그라데이션 생성기 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

CSS 그라데이션을 조합하는 방법

  1. 01

    그라데이션 유형 선택하기

    그라데이션 유형을 열고 직선 블렌드면 선형을, 원형이면 방사형을 고르세요. 미리보기 배지가 작업 중인 현재 각도를 보여 줍니다.

  2. 02

    방향 또는 초점 설정하기

    방향 / 초점은 0~360 범위입니다. 선형 그라데이션에서는 각도(도)를, 방사형에서는 중심을 둘러싼 링 위에 초점을 배치합니다. 배지가 값을 실시간으로 추적해서 작은 수정도 판단하기 쉬워요.

  3. 03

    색상과 중지점 정하기

    시작 색상과 끝 색상을 설정하고, 시작 중지점(0~99%)과 끝 중지점(1~100%)을 배치하세요. 시작이 끝보다 앞에 있어야 하며, 반대면 상태가 값 확인으로 바뀌어요.

  4. 04

    블렌드 구간 제어하기

    두 중지점 사이의 거리가 전환 영역입니다. 1%만 떨어진 중지점은 투톤 스트라이프용의 거의 딱딱한 가장자리를 만들고, 0%와 100%(기본값)의 중지점은 가장 부드러운 전폭 블렌드를 주세요. 숫자보다 미리보기를 보세요.

  5. 05

    선언 복사하기

    CSS 복사 또는 .css 다운로드로 toolars-gradient.css를 저장하세요. .gradient 규칙은 background 선언 하나(linear-gradient(…deg, …) 또는 radial-gradient(circle at …, …))이며 중지점과 정확히 일치합니다.

  6. 06

    적용하고 확장하기

    이 단일 선언은 자신만의 background-size나 background-repeat 추가와 깔끔하게 어울려요. 세 번째 색이 필요하면 규칙을 복사해 중간 중지점을 손으로 삽입하세요. 조정한 두 중지점이 블렌드의 양끝을 고정합니다. 한 줄이라서, 디자인 시스템이 토큰을 그렇게 관리한다면 커스텀 프로퍼티에도 깔끔하게 붙어요.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

CSS 그라데이션 생성기 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

CSS 그라데이션 생성기 도구가 실제로 하는 일

브랜드 블루에서 틸로 녹아드는 히어로 밴드, 제품 사진 뒤의 부드러운 방사형 빛, 요금표의 하드 스톱 투톤 스트라이프까지, 그라데이션은 어떤 이미지 자산보다 많은 인터페이스를 지탱합니다. 방사형 모드는 선형 블렌드로는 흉내 낼 수 없는 광채와 비네트에서 진가를 발합니다. 어림짐작 대신 명시적인 중지점으로 시각적으로 조합하면 몇 초면 충분하고, 생성은 이 탭 안에서 이뤄지므로 팔레트 실험은 디자인이 공개될 때까지 비공개로 남아요. 복사한 선언은 스타일시트에 넣기 전에 다듬을 필요도 없습니다.

자주 묻는 질문

미리보기에 값 확인이 뜨는 이유는 무엇인가요?
규칙은 하나입니다. 시작 중지점은 끝 중지점보다 앞에 있어야 합니다. 같거나 뒤집힌 중지점은 그라데이션을 모호하게 만들므로, 메시지가 그 규칙을 알려 주고 통과할 때까지 복사와 다운로드는 기다려요. 중지점 사이에 1%라도 유지하면 충분합니다.
방향 / 초점은 방사형 모드에서 무엇을 하나요?
방사형 그라데이션에서 각도는 아무것도 회전하지 않습니다. 원의 초점을 중심에서 25% 바깥의 링 위에 배치합니다. 0°는 초점을 오른쪽으로, 180°는 왼쪽으로 밀어요. 볼내는 circle at X% Y% 좌표가 이를 정확히 반영합니다.
원하는 방향에는 어느 각도를 쓰면 되나요?
선형 각도는 CSS 관례를 따라요. 0deg는 위로, 90deg는 오른쪽으로, 180deg는 아래로, 270deg는 왼쪽으로 블렌드합니다. 기본값 135deg는 왼쪽 위에서 오른쪽 아래로 가는 대각선으로, 대부분의 히어로 밴드에 잘 어울려요.
하드 스톱 스트라이프는 어떻게 만드나요?
검증은 시작 중지점이 끝 중지점보다 앞에 있을 것을 요구하므로, 1% 간격으로 배치하세요. 중앙 이음선이면 49%와 50%입니다. 전환 구간이 머리칼 굵기의 선으로 줄어, 어떤 요소에서도 선명한 투톤 분할로 읽혀요.
세 가지 색의 그라데이션도 만들 수 있나요?
이 생성기는 의도적으로 두 개의 명시적 중지점으로 동작합니다. 컨트롤과 검증이 커버하는 범위입니다. 선언을 복사한 다음 중간 중지점을 손으로 추가하는 것은 한 줄 편집이면 됩니다.
색상이 어딘가에 업로드되나요?
아니요. 모든 것이 현재 브라우저 탭 안에서 계산되고 계정도 필요 없습니다. 어떤 값도 저장소, 로그, 분석에 들어가지 않습니다. 초기화를 누륵면 기본 선형 블렌드로 돌아가요.

디자인 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

CSS 로더 생성기

CSS Loader Generator

궤도 링이나 점 세 개 로딩 스피너를 크기, 굵기, 속도, 색상 제어로 디자인하고 reduced-motion을 존중하는 CSS를 복사합니다.

생성

CSS 체크박스 생성기

CSS Checkbox Generator

크기, 테두리, 상태 색상으로 커스텀 체크박스를 꾸미고, 키보드 접근이 가능한 실제 input을 유지하는 CSS를 복사합니다.

생성

CSS 스위치 생성기

CSS Switch Generator

트랙, 썸, 두 상태 색상을 갖춘 순수 CSS 토글 스위치를 만들고 포커스와 reduced-motion 처리를 포함한 코드를 복사합니다.

생성

CSS clip-path 생성기

CSS Clip Path Generator

드래그, 키보드 또는 좌표로 다각형을 편집하세요. 네 가지 프리셋에서 시작해 clip-path 선언이나 전체 CSS를 로컬에서 복사합니다.

생성