궁극의 CSS 그라디언트 생성기

강력한 Photoshop 스타일 CSS 그라디언트 에디터

프리셋
이름:
스탑
투명도:
위치: %
색상:
위치: %
스폰서
미리보기
방향: 크기: x IE
CSS
background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */
복사
색상 형식:

브라우저 호환성

IE Edge Firefox Chrome Safari Opera iOS Safari 안드로이드 브라우저 안드로이드용 크롬
6 - 8
filter 구문을 사용한 부분 지원 브라우저 사용률: 0.03%
4 - 9
오래된 -webkit- 구문을 사용한 지원
브라우저 사용률: 0%
"최대 호환성"을 선택하여 지원
4 - 5
오래된 -webkit- 구문을 사용한 지원
브라우저 사용률: 0.01%
"최대 호환성"을 선택하여 지원
3.2 - 4.3
오래된 -webkit- 구문을 사용한 지원
브라우저 사용률: 0%
"최대 호환성"을 선택하여 지원
2.1 - 3
오래된 -webkit- 구문을 사용한 지원
브라우저 사용률: 0.01%
"최대 호환성"을 선택하여 지원
9
filter 구문을 사용한 부분 지원
SVG를 사용한 전체 지원 ("IE9 지원" 선택)
브라우저 사용률: 0.05%
"최대 호환성"을 선택하여 지원
3.6 - 15
-moz- 접두사를 사용한 지원
브라우저 사용률: 0.01%
"최대 호환성"을 선택하여 지원
10 - 25
-webkit- 접두사를 사용한 지원
브라우저 사용률: 0%
"최대 호환성"을 선택하여 지원
5.1 - 6
-webkit- 접두사를 사용한 지원
브라우저 사용률: 0.01%
"최대 호환성"을 선택하여 지원
11.1 - 11.5
-o- 접두사를 사용한 지원
브라우저 사용률: 0%
"최대 호환성"을 선택하여 지원
5.1 - 6.1
-webkit- 접두사를 사용한 지원
브라우저 사용률: 0%
"최대 호환성"을 선택하여 지원
4 - 4.3
-webkit- 접두사를 사용한 지원
브라우저 사용률: 0.09%
"최대 호환성"을 선택하여 지원
10+
전체 지원 (접두사 없음)
12+
전체 지원 (접두사 없음)
16+
전체 지원 (접두사 없음)
26+
전체 지원 (접두사 없음)
6.1+
전체 지원 (접두사 없음)
12+
전체 지원 (접두사 없음)
7.1+
전체 지원 (접두사 없음)
4.4+
전체 지원 (접두사 없음)
46+
전체 지원 (접두사 없음)

(?)

CSS 그라디언트 문서로의 링크: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

새로운 기능

더 보기... 덜 보기...

소개

최고의 CSS 그라디언트 에디터는 Alex Sirota에 의해 만들어졌습니다. 이 도구를 좋아하신다면, 더 고급 도구들을 제공하는 ColorZilla를 확인해 보세요.

알다시피, HTML5는 웹 개발자들을 위한 많은 흥미로운 기능들을 도입했습니다. 이 기능들 중 하나는 이미지를 생성하고 그라디언트 효과를 위한 반복 배경으로 사용할 필요 없이 순수한 CSS3를 사용하여 그라디언트를 지정할 수 있는 기능입니다.

중요: 이 그라디언트 생성기를 사용하려면 최신 버전의 Firefox, Chrome, Safari, Opera 또는 IE가 필요합니다. 결과 CSS 그라디언트는 크로스 브라우저이며, 이러한 브라우저에서 작동하고 이전 버전의 Internet Explorer에서는 더 간단한 그라디언트로 대체됩니다.

기능

도움말

주 그라디언트 제어는 다음을 허용합니다:

'스톱' 패널을 사용하여 현재 선택된 스톱의 색상과 위치를 더 정확하게 제어할 수 있습니다.

'미리보기' 패널을 사용하면 현재 그라디언트를 수직 또는 수평으로 미리 볼 수 있으며, IE에서 폴백 그라디언트가 어떻게 보일지 빠르게 미리 볼 수 있습니다.

마지막으로, 'CSS' 패널은 항상 현재 그라디언트에 대한 CSS를 가지고 있어, 스타일시트에 쉽게 복사하고 붙여넣을 수 있습니다. 이 패널을 사용하여 기존 그라디언트 CSS를 도구로 가져올 수도 있습니다.

크레딧

'Ultimate Web 2.0 Gradients' 그라디언트 사전 설정은 deziner folioSGlider12의 작업에서 파생되었습니다.

색상 선택기는 John Dyer's Color Picker의 약간의 수정입니다.

Base-64 인코더 함수는 webtoolkit에서 가져왔습니다.

몇몇 아이콘은 Yusuke Kamiyamane에 의해 제작되었습니다.

Tags: CSS Gradient Editor, CSS Gradient Generator, HTML5 Gradient Generator, CSS3 Gradient Generator, CSS Gradient Maker, CSS Gradient Creator, Linear Gradients, Radial Gradients, IE6, IE7, IE8, IE9, IE10, SVG Gradients, ColorZilla CSS 그라디언트 에디터, CSS 그라디언트 생성기, HTML5 그라디언트 생성기, CSS3 그라디언트 생성기, CSS 그라디언트 메이커, CSS 그라디언트 생성자, 선형 그라디언트, 방사형 그라디언트, SVG 그라디언트