CSS 그라데이션 생성기
선형 및 방사형 CSS 그라데이션을 만듭니다. 색상을 시각적으로 선택하고 생성된 CSS를 복사하세요.
background: linear-gradient(135deg, #535beb, #7c3aed);
CSS 그라데이션 생성기란 무엇인가요?
CSS 그라데이션은 둘 이상의 색상 간 색상 전환입니다. 선형 그라데이션은 한 방향으로 흐르고, 방사형 그라데이션은 한 점에서 퍼져 나갑니다. 이 생성기는 일반적인 경우를 다룹니다. 사용자 정의 위치를 가진 복잡한 다중 정지점 그라데이션은 직접 만드세요.
자주 묻는 질문
그라데이션은 효율적인가요?▼
예. 그라데이션 이미지보다 훨씬 경제적입니다. 품질 손실 없이 어떤 크기로도 확장됩니다.
그라데이션에 애니메이션을 적용할 수 있나요?▼
그라데이션을 직접 애니메이션화하는 것은 지원되지 않습니다. JavaScript를 통해 그라데이션 속성을 애니메이션화하거나 background-position 트릭을 사용하세요.
관련 도구
색상 변환기 (HEX/RGB/HSL)
HEX, RGB, HSL 형식 간에 색상을 변환합니다. 색상을 시각적으로 선택하거나 값을 직접 입력하세요.
CSS Box Shadow 생성기
CSS box-shadow 값을 시각적으로 만듭니다. 실시간으로 미리 보고 생성된 CSS를 복사하세요.
Cubic Bezier 가속 곡선 생성기
CSS용 cubic-bezier 가속 곡선을 만듭니다. 표준 사전 설정이 포함되어 있습니다.
색상 팔레트 생성기
임의의 기준 색상에서 조화로운 색상 팔레트를 생성합니다. 보색, 유사색, 삼색조, 단색 배색을 지원합니다.
CSS Border Radius 생성기
복잡한 CSS border-radius 값을 시각적으로 만듭니다. 각 모서리를 독립적으로 제어합니다.
CSS Clamp() 생성기
clamp()로 유동적이고 반응형인 CSS 값을 생성합니다. 뷰포트 범위에 걸쳐 최소 크기와 최대 크기 사이를 부드럽게 조정합니다.