Найкращий генератор 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 був створений 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
Гнучка панель попереднього перегляду
Постійні посилання на градієнти для відправлення та обміну
Більше незабаром!

Допомога

Головний контролер градієнту дозволяє вам:

» Налаштувати позицію зупинки градієнту, перетягуючи маркер зупинки
» Налаштувати колір зупинки, двічі клацнувши на маркері зупинки
» Видалити зупинку, перетягнувши маркер зупинки вгору або вниз
» Додати нову зупинку, клацнувши будь-де між існуючими маркерами зупинок

Ви можете використовувати панель 'Зупинки' для більш точного контролю кольору та позиції вибраної зупинки.

Панель 'Попередній перегляд' дозволяє переглянути поточний градієнт як вертикальний або горизонтальний, а також швидко переглянути, як буде виглядати градієнт для Internet Explorer в IE.

Нарешті, панель 'CSS' завжди має CSS для поточного градієнту для легкого копіювання та вставки в ваш стильовий аркуш. Ви також можете використовувати цю панель для імпорту існуючого градієнту CSS в інструмент.