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