Градиент генератор css: CSS Gradient генератор — создать градиент для веб сайта

Для относительно быстрой генерации кроссбраузерного CSS градиента существует бесплатный веб-сервис под названием ColorZilla / Ultimate CSS Gradient Generator, который по своему внешнему виду напоминает схожий десктопный инструмент из графического редактора Adobe Photoshop.

Последний обладает следующими возможностями:

• Можно выбрать формат цвета для градиента: RGB, HEX, RGBA, HSLA или HSL.
• Можно выбрать одно из четырех направлений градиента.
• Можно выбрать одну из готовых цветовых тем (квадратики справа на скриншоте, см. в начале заметки).
• Можно импортировать градиент из файла изображения, либо иного CSS файла.

P.S. Помимо прямой генерации градиентов онлайн есть дополнения для Mozilla Firefox и Google Chrome, но их я не рискнул устанавливать.

Опубликовано 14-03-2013 в 13:19

Веб-сервисы

Метки

AJAX CSS хаки cURL Git Google Google Chrome HTML шаблоны для сайтов JQuery Notepad++ SSH TinyMCE XAMPP Яндекс администрирование Concrete5 администрирование GetSimple администрирование MODX Evolution администрирование MODX Revolution администрирование Wolf безопасность блог на MODX Revolution новости объекты основы HTML основы PHP отладка отправка почты плагины для MODX Evolution примеры работа с API MODX Evolution работа с архивами работа с массивами работа со строками работа с файлами работа с формами в Drupal работа с элементами в JavaScript разное регулярные выражения редирект решение проблем сайт на MODX Evolution селекторы сниппеты в MODX установка CMS хостинг чанки

Посмотреть все метки »

Статистика спама

Akismet заблокировал 33 450 спамеров

Архивы

• Июнь 2014 (11)
• Май 2014 (5)
• Апрель 2014 (4)
• Март 2014 (6)
• Февраль 2014 (9)
• Январь 2014 (20)
• Декабрь 2013 (30)
• Ноябрь 2013 (29)
• Октябрь 2013 (15)
• Сентябрь 2013 (16)
• Август 2013 (23)
• Июль 2013 (7)
• Июнь 2013 (32)
• Май 2013 (5)
• Апрель 2013 (26)
• Март 2013 (58)
• Февраль 2013 (43)
• Январь 2013 (15)
• Декабрь 2012 (7)
• Ноябрь 2012 (21)

Главная

CSS Gradient Background Generator — Advanced (до 10 оттенков)

Обязательно попробуйте CSS Gradient Background Generator с яркими цветами и стилями, такими как линейные, радиальные или конические эффекты градиента для вашей веб-страницы с помощью этого генератора градиентного фона CSS. Создайте расширенный яркий градиентный фон, используя CSS для своей веб-страницы с помощью этого генератора градиента CSS.

Тип градиента

LinearRadialConic

Угол (градусы)

Позиция

X

Y

Интерполяция HSLLCHLABLRGB

Количество цветов

⮂

Синтаксис CSS для градиентного фона

Этот инструмент для создания градиентного фона CSS сильно отличается от других инструментов, поскольку он автоматически добавляет ближайший цветовой диапазон  из двух выбранных вами цветов к удаляет из него серый оттенок , и это создает уникальный яркий фоновый эффект . Вы также можете настроить количество цветов, которые будут добавлены для градиента фона CSS.

Градиентный стиль можно использовать в любом месте на фоне элемента изображения, поскольку он создается динамически, и для этой цели не нужно использовать файл изображения. Его можно создать с помощью одной строки синтаксиса в CSS или атрибуте стиля. Поскольку градиенты генерируются браузером как динамические, их можно изменить или увеличить до любого размера без каких-либо проблем с качеством, поэтому градиент лучше, чем растровое изображение для аналогичных нужд.

Тип стилей градиента CSS

Существует три типа эффектов фонового градиента, доступных в таблице стилей CSS или теге стиля элемента HTML.

• Линейный градиент
• Радиальный градиент
• Конический градиент

Здесь полоса цветов проходит по прямой линии для линейного градиента, но цвета идут от центра для радиального градиента, и вы можете решить, где находится центр, а также сделать его круглым или эллиптический. Цвета конического градиента вращаются вокруг центра круга, начиная сверху по часовой стрелке.

Как использовать генератор фонового градиента CSS?

Чтобы получить желаемый результат для вашего фона, вам необходимо ввести некоторые данные.