html渐变生成,css gradient 在线渐变生成工具

预设

保存名称:保存

Enter existing gradient CSS to import

Use Mozilla, Webkit, Opera, W3C or IE format

import

cancel

Import from an image-based gradient

Analyzes the image and converts found gradient to CSS

upload a gradient image:

or specify gradient image URL:

import

cancel

Hue:

Saturation:

Lightness:

ok

cancel

Stops

Opacity:

Location:

%

delete

Color:

Location:

%

delete

预览

渐变方向:

水平  →

垂直  ↓

左上到右下  ↘

右下到左上  ↗

径向  ○

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 */

✔ 复制成功！

复制

颜色模式:

hex

rgb

rgba

hsl

hsla

使用注释

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

H:

°

S:

%

B:

%

R:

G:

B:

#:

OK

Cancel

浏览器兼容一览

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

有哪些新的？

» 默认情况下，不要生成较旧的 Opera、IE10 预览版、Webkit 语法(使用"最大化兼容性"模式重新打开)

» 浏览器兼容性面板显示支持的浏览器版本、使用情况统计信息等。

» 支持 半径 线性梯度

» 支持使用 SVG 在 Internet 资源管理器 9 (IE9) 中提供完整的多站渐变

» 支持使用指南针混合的 Sass SCSS 格式

» 复制到剪贴板按钮，快速抓取生成的代码

» 通过拖动预览面板的角轻松调整其大小

关于工具

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

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

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

Features

Powerful Photoshop-like interface

Cross browser CSS output

Horizontal, vertical, diagonal and radial gradients

Complex multi-stop gradients

Opacity support with multiple opacity stops

Hex, rgb, rgba, hsl, hsla color formats

Support for full multi-stop gradients with IE9

Import from image (convert image gradient to CSS)

Import from existing CSS

Adjust gradient by hue, saturation, lightness

More than 135 gradient presets

Saving custom gradient presets

Sass output

Flexible preview panel

Gradient permalinks for sending and sharing

More soon!

帮助

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

» 通过拖动停止标记调整渐变停止位置

» 通过双击停止标记来调整停止颜色

» 通过向上或向下拖动停止标记删除停止

» 单击现有停止标记之间的任意位置，添加新停止点

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

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

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

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