CSS 그라디언트 생성기

background: linear-gradient(to right, #6366f1, #ec4899);

사용 방법 1. 그라디언트 방향(각도)을 슬라이더로 설정합니다. 2. 색상 스톱을 추가하고 각각의 색상을 선택합니다. 3. linear, radial, conic 중 그라디언트 유형을 선택합니다. 4. 미리보기로 결과를 확인하고 CSS 코드를 복사합니다. 5. Tailwind CSS 형식으로도 내보낼 수 있습니다. 이런 분께 추천 CSS 그라디언트 배경을 만드는 프론트엔드 개발자, UI 버튼이나 카드에 그라디언트를 적용하는 디자이너, CSS 그라디언트 문법이 헷갈리는 웹 개발 입문자에게 유용합니다. 핵심 기능 • Linear / Radial / Conic 그라디언트 생성 • 다수 색상 스톱 추가 • 방향 및 각도 시각적 설정 • CSS 코드 즉시 생성 • Tailwind CSS 클래스 내보내기 자주 묻는 질문 Q. 그라디언트를 배경 이미지와 함께 사용할 수 있나요? A. background: linear-gradient(...), url(image.jpg) 형태로 레이어를 쌓을 수 있습니다. Q. Internet Explorer에서 그라디언트가 지원되나요? A. IE10 이상에서 -ms- 접두사 없이 기본 지원됩니다. IE9 이하는 필터(Filter) 속성이 필요합니다. Q. 투명도가 있는 그라디언트는 어떻게 만드나요? A. 색상 스톱에 rgba() 또는 transparent 값을 사용하면 됩니다. 관련 팁 여러 그라디언트를 background 속성에 쌓으면 복잡한 텍스처 효과를 만들 수 있습니다. 그라디언트 애니메이션은 background-size를 200%로 설정하고 background-position을 animate하는 트릭을 활용하세요.