EllyTools

이미지 도구

계산기

텍스트 도구

색상 도구

파일 도구

유틸리티

그라디언트 생성기

비주얼 편집기로 CSS 그라디언트 만들기

135°
%
%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
bg-gradient-to-br from-[#6366f1] to-[#ec4899]

사용 방법

1

선형(linear)·방사형(radial)·원뿔형(conic) 중 그라디언트 종류를 선택하세요

2

색상 stops를 추가·재배열하고 방향이나 중심을 드래그로 조정하세요

3

생성된 CSS를 복사해 스타일시트에 바로 붙여넣으세요

자주 묻는 질문

관련 도구

누구를 위한 도구인가요?

  • 히어로 섹션·버튼·배경을 만드는 프론트엔드 개발자
  • Figma로 옮기기 전 색 흐름을 프로토타이핑하는 디자이너
  • 조작하면서 실시간 결과를 보며 CSS 그라디언트를 배우는 사람

왜 EllyTools인가요?

100% 무료 & 무제한

회원가입 없이, 제한 없이 원하는 만큼 사용하세요.

개인정보 보호 우선

모든 처리가 브라우저에서 이루어집니다. 파일이 기기를 떠나지 않습니다.

설치 불필요

데스크톱, 태블릿, 스마트폰 등 모든 기기의 브라우저에서 바로 작동합니다.

빠르고 안정적

최신 브라우저 기술로 즉각적인 결과를 제공합니다.

그라디언트 생성기 — 부드러운 색 전환 배경

그라디언트는 평면 색을 풍부한 배경으로 — 모던 웹 디자인이 어디에나 사용. 이 생성기는 선형·방사형·원뿔형 그라디언트를 만들고 바로 붙여넣을 CSS 코드를 출력합니다.

CSS 그라디언트는 기술적으론 이미지 채움 — 진짜 이미지가 아닙니다. 브라우저가 직접 렌더링하고, 어떤 크기에도 스케일되며, 네트워크 요청 추가 없음. 가볍고 아름답고 무한히 조정 가능.

그라디언트 종류

  • 선형(Linear) — 한 방향으로 색이 흐름 (위→아래, 대각선 등)
  • 방사형(Radial) — 중심에서 바깥으로 퍼짐
  • 원뿔형(Conic) — 시계 바늘처럼 중심 주위로 회전 (신규, 덜 보편적)
  • 다중 stops — 3개 이상 색을 정해진 위치에 두고 복잡한 전환

자주 묻는 질문

그라디언트에 띠가 보이는 이유?

중간 값이 부족해서 컬러 밴딩 발생. stops 추가, 또는 sRGB 대신 OKLCH 그라디언트로 색 전환을 더 부드럽게.

그라디언트가 저장되나요?

아니요 — 브라우저에서만 처리.