终极CSS渐变生成器

2024-06-30 21:07| 来源: 网络整理| 查看: 265

适用于Firefox 适用于Chrome 渐变生成器终极CSS渐变生成器

一个强大的类似Photoshop的CSS渐变编辑器

预设姓名：色调/饱和度反向导入css 导入图片输入现有的渐变CSS以导入使用Mozilla，Webkit，Opera，W3C或IE格式从基于图像的渐变导入分析图像并将找到的渐变转换为CSS

色调：饱和度：亮度：节点透明度：位置： % 颜色：位置： % 赞助商预览方向：大小： x IE CSS 切换到 sass background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */ ✔ 已复制到剪贴板复制颜色格式：使用其永久链接保存或分享当前渐变。 Tweet StumbleUpon 27K Follow @colorzilla ° % % #: 浏览器兼容性 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+ 完全支持（无前缀）

(?)

支持IE9的全多停止渐变（使用SVG）。为所有具有渐变的元素添加一个“gradient”类，并在您的HTML中添加以下覆盖以实现IE9的支持：

CSS渐变文档的链接： W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].

新功能 » 默认不生成任何有前缀的语法（可以通过'最大化兼容性'模式开启）显示更多... 显示较少... 以前的版本 (English) » Don't generate older Opera, IE10 Preview, Webkit syntax by default (turn back on using "Maximize compatibility" mode) » Browser Compatibility panel showing supported browser versions, usage stats etc. » Support for radial and diagonal linear gradients » Support for full multi-stop gradients in Internet Explorer 9 (IE9) using SVG » Support for Sass SCSS format using Compass mixins (needs latest beta of Compass) » Copy to clipboard button for quickly grabbing the generated code » Easy resizing of preview panel by dragging its corner » Opacity support · Create transparent css gradients, or add fade-in, fade-out, semi-transparency and similar effects · Add any number of opacity stops to your gradient · Supports opacity stops at any position - completely independent of color stops · Automatically switch to rgba/hsla color output mode when transparency is used · Outputs older Internet Explorer opacity format (yes, this will even work with IE6!) · Opacity support when importing from CSS · Supports importing gradients with transparency from an image » Double click on CSS text output to select all of it for easy copying » More robust new algorithm for converting gradient images to CSS, including alpha support » New 'Adjustments' panel - tweak your gradient or create new flavors · Adjust hue, saturation and lightness · Reverse current gradient » Added hsl and hsla color format support in CSS output » Added a unique permalink to each gradient for linking to, saving or sharing specific gradients. » Added the ability to toggle CSS comments on/off. » Added support for 4 new gradient formats: · IE 10+ · Newer Webkit · Opera 11.10+ · W3C » Import from an image - convert an existing gradient image to CSS · Supports complex multi-stop gradients · Upload an image or import from an image URL » Import from CSS - enter existing gradient CSS in various formats and import it into the tool » Save your gradients as new presets · Edit your gradient, enter its name and hit 'new' · Remove any of your preset gradients using its context menu (right click) · Your gradient presets will be persisted in the tool across sessions » Added rgb and rgba color format support in CSS output » Persist settings across sessions - gradient orientation, preview panel dimensions, output color format etc. » Keyboard shortcuts - press up/down in color stop entry box to increase/decrease value

关于

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

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

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

特性强大的类似 Photoshop 的界面跨浏览器 CSS 输出水平、垂直、对角和径向渐变复杂的多停止渐变支持具有多个不透明度停止点的不透明度 Hex、rgb、rgba、hsl、hsla 颜色格式支持 IE9 的全多停止渐变从图像导入（将图像渐变转换为 CSS）从现有 CSS 导入通过色调、饱和度、亮度调整渐变超过 135 个渐变预设保存自定义渐变预设 Sass 输出灵活的预览面板用于发送和分享的渐变永久链接更多即将推出！帮助

主渐变控制允许你：

» 通过拖动停止标记调整渐变停止位置 » 通过双击停止标记调整停止颜色 » 通过向上或向下拖动停止标记来删除一个停止 » 通过点击现有停止标记之间的任何位置来添加一个新的停止你可以使用 'Stops' 面板来更精确地控制当前选中的停止的颜色和位置。

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

最后，'CSS' 面板总是包含当前渐变的 CSS，以便于你复制并粘贴到你的样式表中。你也可以使用此面板将现有的渐变 CSS 导入到这个工具中。

致谢

'Ultimate Web 2.0 Gradients' 渐变预设是由 deziner folio 和 SGlider12 的工作衍生出来的。

颜色选择器是 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 渐变

Change language:

联系 | 使用条款 | 隐私政策

【本文地址】

终极CSS渐变生成器

终极CSS渐变生成器

今日新闻

推荐新闻