그라데이션 생성기
온라인 CSS 그라데이션 생성 도구, 线性渐变과径向渐变 생성, 시각적 조정 및一键 코드 복사
미리보기
설정
색상 중지점
0%
100%
사전 설정 템플릿
CSS 코드
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);CSS 그라데이션이란?
CSS 그라데이션(Gradient)은两个或多个 색상之间平滑过渡하는 효과입니다. 线性渐变은直线方向으로过渡하고, 径向渐变은中心点에서向外扩散过渡합니다. 그라데이션은背景, 按钮, 卡片等元素에使用하여视觉效果을提升할 수 있습니다.
사용 方法
- 그라데이션 유형을 선택합니다: 线性渐变 또는径向渐变
- 색상 중지점을添加하고 각 색상의 위치를 조정합니다
- 线性渐变은角度方向을 설정할 수 있고, 径向渐变은中心位置을 설정할 수 있습니다
- 그라데이션 효과를 실시간으로 미리 봅니다
- '코드 복사'를 클릭하여 CSS 코드를获取합니다
- 사전 설정 템플릿을 선택하여常见한 그라데이션을快速应用합니다
주요 용도
- 웹페이지 배경: 페이지 또는区块에 그라데이션 배경을添加
- 按钮样式: 그라데이션 버튼을 생성하여视觉吸引力을提升
- 卡片装饰: 卡片에 그라데이션 테두리或 배경을添加
- 品牌配色: 브랜드 색상을使用하여 그라데이션 효과를 생성
- UI设计: 设计参考를 위한 그라데이션原型을快速生成
자주 묻는 질문 (FAQ)
Q: 线性渐变과径向渐变의 차이는?
A: 线性渐变은指定된 각도의直线方向으로 색상을过渡합니다. 径向渐变은中心点에서向外扩散过渡하며, 类似한圆形扩散效果입니다.
Q: 색상 중지점의 위치란 무엇인가요?
A: 위치百分比는 그라데이션에서 색상이出现하는 위치를 나타냅니다. 0%는起点이고 100%는终点입니다. 예를 들어两个 색상이分别 0%와 50%에 있으면, 前半段는첫 번째 색상에서두 번째 색상으로의过渡입니다.
Q: 多色渐变은 어떻게 생성하나요?
A: '색상 추가' 버튼을 클릭하여更多 색상 중지점을添加합니다. 각 색상은不同的位置를 설정할 수 있어复杂한 그라데이션 효과를形成할 수 있습니다.
Q: 생성된 CSS 코드는 어떻게使用하나요?
A: 코드를 복사한后, background 또는 background-image 속성 값으로 CSS 스타일시트에应用합니다. 예: .element { background: linear-gradient(...); }