Генератор градиентов CSS

Предустановки

Имя:

оттенок/насыщенность инвертировать импортировать css импортировать изображение

Точки

Прозрачность:		Расположение:	%
Цвет:		Расположение:	%

Спонсор

Предпросмотр

Ориентация: Размер: x IE

CSS

переключиться на sass

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

копировать

Формат цвета: Комментарии

Ссылка для сохранения или обмена текущим градиентом с использованием его постоянной ссылки.

Совместимость с браузерами

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Браузер Android	Chrome для Android
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 (?) Максимальная совместимость

Ссылки на документацию по градиентам 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 Gradient был создан Alex Sirota. Если этот инструмент вам понравился, ознакомьтесь с ColorZilla для более продвинутых инструментов, таких как инструменты для выбора цвета, палитровые редакторы и анализаторы сайтов.

Как вы, возможно, знаете, HTML5 ввел множество интересных возможностей для веб-разработчиков. Одной из таких возможностей является возможность указывать градиенты с помощью чистого CSS3, без необходимости создавать изображения и использовать их как повторяющиеся фоны для создания градиентных эффектов.

Важно: Для использования этого Генератора градиентов вам понадобится свежая версия Firefox, Chrome, Safari, Opera или IE. Результативные CSS градиенты являются кроссбраузерными - они будут работать в этих браузерах и также вернутся к более простому градиенту в старых версиях Internet Explorer.

Особенности

Мощный интерфейс, похожий на Photoshop
Кроссбраузерный вывод CSS
Горизонтальные, вертикальные, диагональные и радиальные градиенты
Комплексные градиенты с несколькими точками остановки
Поддержка прозрачности с несколькими точками прозрачности
Форматы цветов Hex, rgb, rgba, hsl, hsla
Поддержка полных градиентов с несколькими точками остановки в IE9
Импорт из изображения (конвертирование градиента изображения в CSS)
Импорт из существующего CSS
Регулировка градиента по оттенку, насыщенности и светлоте
Более 135 предустановленных градиентов
Сохранение пользовательских предустановок градиентов
Вывод Sass
Гибкая панель предварительного просмотра
Постоянные ссылки на градиенты для отправки и обмена
Скоро больше!

Помощь

Основное управление градиентом позволяет вам:

» Регулировать позицию градиентного маркера, перетаскивая маркер
» Корректировать цвет стопа двойным кликом по маркеру стопа
» Удалить стоп, перетаскивая маркер стопа вверх или вниз
» Добавить новый стоп, щелкнув где-либо между существующими маркерами стопа

Вы можете использовать панель 'Стопов' для более точного управления цветом и позицией текущего выбранного стопа.

Панель 'Предпросмотра' позволяет предварительно просматривать текущий градиент как вертикальный или горизонтальный, а также быстро предварительно просматривать, как будет выглядеть градиент-запасной в IE.

Наконец, панель 'CSS' всегда содержит CSS для текущего градиента для удобства копирования и вставки в ваш стиль. Вы также можете использовать эту панель для импорта существующего CSS градиента в инструмент.