终极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 Android浏览器 Android版Chrome
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].

新功能

显示更多... 显示较少...

关于

Ultimate CSS 渐变编辑器由 Alex Sirota 创建。如果你喜欢这个工具,查看 ColorZilla 以获取更多高级工具,如取色器、颜色选择器、调色板编辑器和网站分析器。

你可能知道,HTML5 为 Web 开发者引入了许多令人兴奋的功能。其中一个功能是能够使用纯 CSS3 指定渐变,无需创建任何图像并将它们用作渐变效果的重复背景。

重要: 你需要使用 Firefox、Chrome、Safari、Opera 或 IE 的最新版本才能使用此渐变生成器。生成的 CSS 渐变是跨浏览器的 - 它们将在这些浏览器中工作,并且也会在旧版本的 Internet Explorer 中回退到更简单的渐变。

特性

帮助

主渐变控制允许你:

你可以使用 'Stops' 面板来更精确地控制当前选中的停止的颜色和位置。

'Preview' 面板允许你以垂直或水平方式预览当前的渐变,并且还可以快速预览在 IE 中的 Internet Explorer 回退渐变将如何看起来。

最后,'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 渐变