아름다운 그라데이션을 디자인하고 CSS 또는 이미지로 내보내기
색상을 선택하고, 정지점을 추가하고, 각도나 중심점을 조정하여 필요한 정확한 그라데이션을 만듭니다. 이 도구는 무제한 색상 정지를 사용하여 선형, 방사형 및 원뿔형 그라디언트를 지원합니다. 스타일시트의 CSS 코드를 복사하거나 디자인 프로젝트에 사용할 수 있도록 그라데이션을 고해상도 PNG로 다운로드하세요.
이 도구를 무료로 사용하세요Browser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
사용방법
그라데이션 유형 선택
선형, 방사형 또는 원추형을 선택합니다. 선형의 경우 각도를 설정합니다. 방사형의 경우 중심점과 모양을 설정합니다.
색상 추가 및 조정
색상 정지점을 추가하려면 그라데이션 막대를 클릭하세요. 드래그하여 위치를 변경하고, 두 번 클릭하여 색상을 변경하고, 각 정지점의 불투명도를 조정하세요.
CSS 복사 또는 다운로드
생성된 CSS 코드를 웹용으로 복사하거나, 해상도를 설정하고 그라데이션을 PNG 이미지로 다운로드하세요.
특징
세 가지 그라데이션 유형
모든 각도의 선형 그래디언트, 중심과 모양을 조정할 수 있는 방사형 그래디언트 또는 점 주위를 스윕하는 원뿔형 그래디언트를 만듭니다. 유형 간에 전환하면 미리보기가 즉시 업데이트됩니다.
무제한 색상 정지
그라디언트 막대를 따라 필요한 만큼 색상 정지점을 추가하세요. 중지점을 드래그하여 위치를 변경하고, 두 번 클릭하여 색상을 변경하거나, 마우스 오른쪽 버튼을 클릭하여 삭제하세요. 각 정지점은 반투명 그라디언트에 대한 불투명도를 지원합니다.
CSS 코드 출력
이 도구는 공급업체 접두사가 포함된 유효한 CSS 배경 이미지 코드를 생성합니다. 코드를 복사하여 스타일시트에 직접 붙여넣으세요. 그라디언트를 편집하면 출력이 실시간으로 업데이트됩니다.
PNG 이미지 내보내기
100px 썸네일부터 4000px 배너까지 모든 해상도의 그래디언트를 PNG로 다운로드하세요. CSS 그라데이션을 지원하지 않는 도구에서 이미지를 배경, 오버레이 또는 디자인 요소로 사용하세요.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai Enhance명세서
| 그라데이션 유형 | 선형, 방사형, 원추형 |
| 색상 중지 | 제한 없는 |
| 각도 범위 | 0~360° |
| CSS 출력 | 표준 + 공급업체 접두사 |
| PNG 내보내기 | 최대 4000×4000px |
| 처리 | 클라이언트측(인스턴트) |
Related Magic Eraser Tools
일반적인 질문
투명도가 있는 그라데이션을 만들 수 있나요?
+
예. 각 색상 정지점에는 불투명도 슬라이더가 있습니다. 그라디언트에 반투명 영역을 만들려면 불투명도를 100% 미만으로 설정하세요. CSS 출력은 rgba 값을 사용하고 PNG 내보내기는 알파 채널을 유지합니다.
원뿔형 그래디언트란 무엇입니까?
+
원뿔형 그래디언트는 시계 바늘이 스윕하는 것처럼 중심점 주위에 색상 정지점을 방사합니다. 원형 차트 스타일 효과, 색상환, 장식 배경에 유용합니다. 브라우저 지원은 최신 브라우저에서 탁월합니다.
생성된 CSS를 모든 프레임워크에서 사용할 수 있나요?
+
예. 출력은 일반 HTML, React, Vue, Tailwind 및 인라인 또는 스타일시트 기반 CSS를 지원하는 기타 프레임워크에서 작동하는 표준 CSS입니다.
사진에 그라데이션이 필요합니까?
AI Enhance는 사진의 색조와 조명을 조정할 수 있으며, 이미지 오버레이 도구를 사용하면 이미지 위에 그라데이션을 혼합하여 세련된 느낌을 줄 수 있습니다.
무료로 사용해 보세요More free tools
Explore our other limited free edits after sign-in photo and image tools.
HEX, RGB, HSL, HSB, CMYK 및 CSS 명명된 형식 간에 색상을 변환합니다. 실시간 미리보기를 보고, 값을 복사하고, 컬러 카드를 내보냅니다.
HEX 색상 코드를 RGB 값으로 변환하거나 그 반대로 변환합니다. 실시간 미리보기, 원클릭 복사, CSS 스니펫 출력. 브라우저에서 작동합니다.
업로드된 이미지에서 색상을 선택하고 HEX, RGB 및 HSL 코드를 즉시 가져옵니다. 웹 디자인, 브랜딩 및 일러스트레이션을 위해 사진으로 팔레트를 만듭니다.
사진을 업로드하고 HEX, RGB, HSL 코드를 사용하여 5~10가지 주요 색상을 추출하세요. 견본을 복사하고 ASE 또는 CSS 변수로 내보냅니다.
URL, 텍스트, WiFi 자격 증명 및 vCard에 대한 QR 코드를 생성합니다. 색상을 사용자 정의하고, 중앙 로고를 추가하고, PNG 또는 SVG로 다운로드하세요.
이미지와 비디오의 너비, 높이 또는 종횡비를 계산합니다. 두 개의 값을 입력하고 세 번째 값을 가져옵니다. 소셜 미디어, 영화, 인쇄물에 대한 사전 설정된 비율.