Tool overview
CSS 그라데이션 생성기이란?
CSS 그라데이션 생성기은(는) 다중 스톱 CSS 그라데이션을 OKLCH·원뿔형·Tailwind로 디자인하기 위한 개발자 도구입니다.
왜 CSS 그라데이션 생성기을(를) 사용하나요?
다중 스톱 CSS 그라데이션을 OKLCH·원뿔형·Tailwind로 디자인하기할 때 가독성과 작업 속도를 높이며 서버로 데이터를 보내지 않습니다.
주요 기능
클라이언트 사이드 프라이버시, 즉시 결과, 원클릭 복사. 다중 스톱 CSS 그라데이션을 OKLCH·원뿔형·Tailwind로 디자인하기
사용 방법
위 도구에서 정확한 결과를 얻기 위한 단계입니다.
- linear, radial 또는 원뿔형을 선택하고 라이브 미리보기에 색상 스톱을 추가하세요.
- 각도나 중심 위치를 조정하고, 더 부드러운 블렌드를 위해 OKLCH를 켠 뒤 필요하면 sRGB와 비교하세요.
- CSS, Tailwind 임의 클래스 또는 CSS 사용자 속성을 복사하거나 나중에 복원할 공유 링크를 복사하세요.
- 기존 background: linear-gradient(...) 선언을 CSS 가져오기에 붙여 스톱을 복원하세요.
- 관련 도구에서 색상 변환기 또는 WCAG 대비로 이동해 스톱 색상을 검증하세요.
CSS 그라데이션 생성기 가이드: linear-gradient, OKLCH, 원뿔형 & Tailwind
이 무료 생성기로 CSS Color 4 OKLCH 보간, @supports 폴백, Tailwind 클래스, 공유 URL이 있는 다중 스톱 linear·radial·conic CSS를 만듭니다.
선형 그라데이션
각도(도)와 무제한 색상 스톱, 위치, 불투명도. 선택적 in oklch 보간.
방사형 그라데이션
퍼센트 중심의 원 또는 타원과 다중 스톱 색상 램프.
원뿔형 그라데이션
중심 주위를 from 각도로 색이 회전. 파이·무지개 효과에 적합.
다중 스톱 색상 & 불투명도
스톱 추가·제거·반전·무작위화; 붙여넣은 background CSS 가져오기.
OKLCH 색 보간
기본은 지각적 블렌드. 구형 브라우저용 @supports sRGB 폴백.
CSS, Tailwind & CSS 변수
배경 CSS, Tailwind 임의 클래스 또는 :root 사용자 속성으로 내보내기.
공유 URL & CSS 가져오기
?g= / #g=로 설정을 동기화하고 붙여넣은 그라데이션 CSS에서 복원.
접근성 연동
선택한 스톱을 WCAG 대비 및 색상 변환기로 딥링크.
CSS 그라데이션 텍스트
그라데이션을 내보낸 뒤 background-clip: text와 투명 글자색으로 적용(Safari는 -webkit-background-clip: text).
CSS 그라데이션 테두리
내보낸 그라데이션을 패딩 래퍼와 안쪽 단색 배경에 쓰거나 같은 그라데이션으로 border-image를 적용.
CSS 그라데이션 애니메이션
여기서 정적 CSS를 내보낸 뒤 스타일시트에서 background-position이나 커스텀 속성을 애니메이션.
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
자주 묻는 질문
일반적인 문제와 데이터 프라이버시에 대한 답변입니다.
공식 문서 및 참고 자료
이 유틸리티의 공식 사양 및 플랫폼 문서입니다.