손쉽게 아름다운 CSS 그라디언트 만들기
직관적인 인터페이스로 놀라운 선형, 방사형 및 원뿔 그라디언트를 생성하십시오. CSS 코드를 복사하여 프로젝트에서 즉시 사용할 수 있습니다.
Preview
생성된 CSS
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
그라디언트 컨트롤
135°
0%
100%
인기 있는 프리셋
그래디언트 예제
이 놀라운 그라디언트 예제를 살펴보고 다음 프로젝트에 대한 영감을 얻어보세요. 그라디언트를 클릭하여 생성기에 로드합니다.
선셋 블러셔
아름다운 석양에서 영감을 받은 따뜻한 그라데이션.
오션 브리즈
해안 바다의 느낌을 연상시키는 잔잔한 경사도.
민트 퓨전
민트색과 하늘색이 어우러진 신선하고 모던한 그라데이션.
울창한 정원
자연의 아름다움을 표현하는 생생한 그라데이션.
코스믹 드림
밤하늘에서 영감을 받은 마법 같은 그라데이션.
골든 아워
황혼의 진수를 담은 따뜻한 그라데이션.
그래디언트 문서
CSS 그라디언트란 무엇입니까?
CSS 그라디언트를 사용하면 두 개 이상의 색상 간에 부드러운 전환을 표시할 수 있습니다. 요소의 배경으로 사용할 수 있으며 세 가지 유형으로 제공됩니다.
- 선형 그라디언트:직선을 따라 전환 색상.
- 방사형 그라디언트:중심점에서 바깥쪽으로 색상을 전환합니다.
- 원추형 그라디언트:전환은 원의 중심점 주위를 색으로 지정합니다.
그라디언트 사용 방법
도구를 사용하여 그라디언트를 생성하면 프로젝트에서 CSS 코드를 사용할 수 있습니다.
- 생성기에서 CSS 코드를 복사합니다.
- CSS 파일에 붙여넣거나 HTML 요소에서 인라인으로 사용합니다.
- 를 사용하여 모든 요소에 그라디언트를 적용합니다.
backgroundproperty.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- 더 복잡한 그라데이션 효과를 위해 두 가지 이상의 색상을 사용합니다.
- 색상 위치를 조정하여 전환이 발생하는 위치를 제어합니다.
- 여러 그라디언트를 결합하여 더욱 창의적인 효과를 낼 수 있습니다.
- 원뿔 그라데이션의 경우 중심을 변경하면 흥미로운 패턴이 만들어집니다.
- 나중에 사용할 수 있도록 좋아하는 그라디언트를 저장하십시오.
브라우저 지원
CSS 그라디언트는 최신 브라우저에서 널리 지원됩니다. 그러나 Internet Explorer와 같은 이전 브라우저는 올바르게 렌더링되지 않을 수 있습니다. 항상 대체 색상을 제공하십시오.
.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+