css gradient 在线渐变生成工具

预设

保存名称:

色调/饱和度反向引用css

Stops

Opacity:

Location: %

Color:

Location: %

预览

渐变方向: Size: x IE

CSS

background: -moz-linear-gradient(); /* FF3.6-15 */

background: -webkit-gradient(); /* Chrome4-9,Safari4-5 */

background: -webkit-linear-gradient(); /* Chrome10-25,Safari5.1-6 */

background: -o-linear-gradient(); /* Opera 11.10-11.50 */

background: -ms-linear-gradient(); /* IE10 preview */

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

filter: progid:DXImageTransform.Microsoft.gradient(); /* IE6-9 */

复制

颜色模式: 使用注释

点击右边链接、保存或共享当前渐变效果分享.

浏览器兼容一览

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Chrome for Android
6 - 8 Partial support using filter syntax Browser usage: 1.33%			4 - 9 Support using old -webkit- syntax Browser usage: 0.06% Select "Maximize compatibility" to support	4 - 5 Support using old -webkit- syntax Browser usage: 0.1% Select "Maximize compatibility" to support		3.2 - 4.3 Support using old -webkit- syntax Browser usage: less than 0.1% Select "Maximize compatibility" to support	2.1 - 3 Support using old -webkit- syntax Browser usage: 0.06% Select "Maximize compatibility" to support
9 Partial support using filter syntax Full support using SVG (select "IE9 support") Browser usage: 1%		3.6 - 15 Support using -moz- prefix Browser usage: 0.25%	10 - 25 Support using -webkit- prefix Browser usage: 0.36%	5.1 - 6 Support using -webkit- prefix Browser usage: 0.2%	11.1 - 11.5 Support using -o- prefix Browser usage: 0.01% Select "Maximize compatibility" to support	5.1 - 6.1 Support using -webkit- prefix Browser usage: 0.04%	4 - 4.3 Support using -webkit- prefix Browser usage: 2.06%
10+ Full support (unprefixed)	12+ Full support (unprefixed)	16+ Full support (unprefixed)	26+ Full support (unprefixed)	6.1+ Full support (unprefixed)	12+ Full support (unprefixed)	7.1+ Full support (unprefixed)	4.4+ Full support (unprefixed)	46+ Full support (unprefixed)

IE9 support (?) Maximize compatibility

终极CSS渐变编辑器是由亚历克斯·西罗塔（约萨特）创建的。如果您喜欢此工具，请查看 ColorZilla 了解更高级的工具，如滴管、颜色选取器、调色板编辑器和网站分析仪。

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

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

本渐变工具可以由你自己发挥自己想要的效果:

您可以使用"停止"面板更精确地将当前选定的停靠点的颜色和位置进行。

"预览"面板允许将当前渐变预览为垂直或水平渐变，还允许快速预览 Internet 资源管理器回退渐变在 IE 中的外观。

最后，"CSS"面板始终具有当前渐变的 CSS，便于复制和粘贴到样式表中。您还可以使用此面板将现有渐变 CSS 导入到工具中。