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


Содержание

15 лучших генераторов и инструментов CSS

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

Существует ряд инструментов и генераторов CSS, которые помогают веб-разработчикам работать эффективно.

Вот список из 15 лучших генераторов и инструментов CSS, облегчающих работу разработчиков и экономящих их время и усилия.

Это лучшие CSS-инструменты всех времен.

CSS Scheme Designer

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

FLIR (Facelift Image Replacement)

Facelift Image Replacement динамически генерирует графические представления текста на веб-странице.

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

Visual CSS Gradient Generator

Этот генератор градиентов отличается от других тем, что настроен на создание холстов и SVG-кодов. Он будет полезен для обеспечения совместимости с браузерами.

Colors Palette Generator

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

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

Hyphenator

Этот инструмент CSS вставляет мягкие переносы, используя алгоритм переносов М. Ляна ( Latex ) и шаблоны переносов, чтобы обеспечить на стороне клиента расстановку переносов HTML-документа для каждого браузера.

Задачей этого инструмента является рекомендация переносов для каждого браузера, который поддерживает мягкие переносы и JavaScript для английского, французского и немецкого языков.

Angrytools Online Gradient Generator

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

Gradient Image Maker

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

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

CSS Type Set

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

Grad3 UI Processor

Этот инструмент поддерживает CSS PNG шаблоны прозрачных фонов. Это дает вам возможность задавать более визуально сложные градиенты.

CSS Template Code Generator

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

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

CSS Typoset Matrix and Code Generator

Этот инструмент был разработан Яном Квикельсом, он способен генерировать исходный код « на лету ». Это просто матричная таблица, которая представляет размеры шрифта и полей в пикселях и em-единицах .

Ultimate CSS Gradient Generator

Этот замечательный инструмент имитирует функцию градиентов Photoshop . Его найдут полезным для себя те, кто ищет для работы знакомый интерфейс.

CSS Grid Calculator

Этот CSS калькулятор позволяет проектировать сетки различными способами. Вы также можете создавать проекты структуры страниц.

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

Em Calculator

Это небольшой инструмент на JavaScript , который позволяет создать удобные и масштабируемые конструкции CSS. Он переводит размер в пикселях в em-единицы.

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

Данная публикация представляет собой перевод статьи « 15 Best CSS Generators and Tools: Developer’s Choice » , подготовленной дружной командой проекта Интернет-технологии.ру

Создание градиентов. Линейный градиент

В CSS3.0 появилась возможность создавать градиенты для элементов, что раньше выполнялось только с помощью изображения, предварительно созданного, как правило, в Photoshop.

Градиенты для CSS бывают линейными (linear-gradient) и радиальными (radial-gradient). И если вы знакомы с Photoshop, то наверняка знаете, что это наиболее часто используемые градиенты.


Для того, чтобы применить градиент, нужно использовать свойство background-image или составное свойство background. Основная проблема здесь заключается в том, что свойство это так долго ожидалось верстальщиками, что все браузеры успели создать свой синтаксис для его отображения. Но об этом мы поговорим ниже, а сейчас основным синтаксисом мы будем считать стандартный.

Итак, сначала о линейном градиенте.

Линейный градиент

Подразумевает, как минимум, наличие 2-х значений цвета: начального и конечного. Самая простая запись выглядит так:

Но вы можете задать направление градиента, используя ключевое слово to и само направление: left (влево), right (вправо), top (вверх), bottom (вниз):

Кроме того, задать направление градиента можно в градусах, например, диагональный градиент будет иметь угол 45deg:

Можно задавать и отрицательное значение, тогда градиент «перевернется», т.е. будет направлен в противоположную сторону.

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

Если вы просто перечисляете цвета через запятую, то количество пространства распределяется между ними поровну. Но вы можете указать в какой точке должен начинаться и заканчиваться цвет. По умолчанию начальная точка задается как 0%, а конечная — как 100%. Поэтому, если вы не планируете ее никуда смещать, можно эти данные не указывать. Записываются значения цвета и значения места расположения через пробел:

Тот, кто работал с настройкой градиента в Photoshop должен заметить очень много параллелей в таком подходе. Там для каждого маркера в можно задать как раз позицию в процентах. И, конечно же выбрать цвет.

В чем еще прелесть назначения позиций для градиента? Да в том, что с помощью указаний одних и тех же позиций для разных маркеров можно градиент превратить в . флаг, например, или сделать макет с 2-х или 3-х-колоночной версткой с колонками разного цвета.

Посмотреть результат всех предыдущих экспериментов можно здесь:

Кроссбраузерный линейный градиент

Теперь о многообразии вариантов градиента: для старых браузеров, не поддерживающих градиенты в принципе, нужно указать цвет фона, соответствующий одному из оттенков градиента: background: #b4e391;

Есть еще вариант показать для них изображение с градиентом, например:

Изображение в этом случае должно быть размером, например, 30×1920 px, чтобы охватывать большинство современных экранов. Градиент направлен слева направо.

Для Mozilla Firefox версий 3.6-15, Chrome версий 10-25, Safari версий 5.1 — 6 и 7+, Opera версии 11.5 и старше нужно указывать и ввендорные префиксы (-moz-, -webkit-, -o-), и убирать ключевое слово to.

Илон Маск рекомендует:  Фоновые рисунки

А для IE до версии 10 существует специальный фильтр.

Результат будет выглядеть так:

Генератор градиента от Colorzilla

Чтобы не думать о кроссбраузерности, можно воспользоваться отличным редактором-генератором градиента, представляемым сайтом colorzilla.com. Очень наглядно, как в Photoshop, можно выбирать градиенты из набора существующих, изменять цвета и расположения маркеров, менять направление и вид градиента (линейный, радиальный), выбирать формат цвета, задавать прозрачность. И в конце нужно просто скопировать готовый код. Масса удовольствия, причем абсолютно бесплатно.

Кроме того, можно установить расширение от Colorzilla для браузеров Chrome и/или Firefox, и пользоваться еще пипеткой, например, или палитрой цветов, или анализировать цветовую палитру любого сайта. Для этого всего навсего нужно нажать на значок пипетки в правом верхнем углу браузера. Там есть опция CSS Gradient Generator — так вот это прямая ссылка на описанный выше генератор градиента.

CSS Matic Gradients

Еще один отличный сервис для создания градиента — это CSS Matic Gradients. Он предоставляет примерно те же возможности, что и Colorzilla Gradient Generator, но немного иначе. Мне очень нравится ползунок Hue (оттенок), с помощью которого можно легко изменить цвета выбранного градиента, не правя при этом оттенок каждого маркера.

На скриншоте ниже видно, что цвет маркера красный, ползунок Hue сдвинут в левую сторону, в результате получился сине-фиолетовый градиент. Ползунок Lightness позволит сделать градиент темнее/светлее.

Справа от градиента можно выбрать его направление (вправо, вниз, по диагонали) и вид (линейный, радиальный).
Есть поддержка IE младше 10 версии.

Кроме того, здесь есть возможность получить цвет в формате SASS, что очень удобно для тех, кто использует этот CSS-препроцессор.

UI Gradients

Еще один сайт, посвященный градинтам uiGradients. На нем есть ряд приятных двухцветных линейных градиентов, которые вы можете использовать как при дизайне сайта, так и в его верстке.

На главной странице вы увидите слайдер, который позволит выбрать градиент, скопировать 16-ричное значение цветов в нем или получить css-код градиента.

Кроме того, нажав клавишу SHIFT или кнопку внизу слайдера с градиентом, вы увидите ряд блоков с примерами градиентов. Сделать выбор в этом случае будет проще и быстрее.

Нажав клавишу ENTER или кнопку внизу слайдера, вы получите css-код градиента с предложением скопировать его в буфер обмена.

CSS3 Maker

Еще один сервис, на котором вы можете настроить градиент — CSS3 Maker. Он содержит генератор не только градиента, но и других CSS3-свойств. Что касается градиента, то сайт определяет, какой браузер вы используете для серфинга по Интернету и выдает вам код с соответствующим вендорным префиксом (в моем случае -moz-linear-gradient для Mozilla Firefox). Не очень удобно в плане унификации кода. Зато можно поиграться с настройками. И посмотреть заодно, как работают другие свойства.

Blend — Create and customize beautiful CSS3 gradients.

В заголовке сервиса Blend написано «Создавайте и изменяйте красивые CSS3 градиенты». И так оно и есть.

Вы задаете нужные вам цвета, нажимаете на кнопку «Let’s Blend» — и, вуаля, градиент готов.

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

Минусом этого генератора градиентов является то, что можно настроить градиент только из двух цветов и не более. Хотя, следует признать, что чаще всего больше и не требуется.

Online CSS Gradient Generator

Online CSS Gradient Generator

Gradient is combination of two or more colors where transitions between colors are smooth. These gradient is useful for background, banners and buttons.

There are 6 types of gradient orientation:
linear, radial, elliptical, repeating linear, repeating radial and repeating elliptical.


In this tool you can create linear and radial gradient code for CSS, SVG, canvas, PHP and Android. In addition for CSS code you can also generate ellipital and repeating orientation from other tool page refer below. In middle left side of the tool there is a gradient bar, this gradient bar is responsible for generate gradient pattern. Above and below are alpha stopper and color stopper. You need to drag stopper to generate different patterns. Delete stopper by drag to up or down direction. Add new stopper by click at place of draggable area.

You can save current setting and use later by clicking ‘unique link’. Export data to other tool page for latest browser support and image generator.

Градиент css генератор

Отображение градиента css

Готовый код градиента css

Параметры градиент css генератора оналайн

  1. Левый цвет градиента. Подбираем у блока в левой части цвет любых оттенков с помощью сочетания красного, зеленого и синего цвета.
  2. Правый цвет градиента. Выбираем оттенок цвета справа.
  3. Уровень между градиентами. Расстояние от левой части блока где начнется градиент.
  4. Размытие градиента. Смешивание двух цветов от уровня между цветами.
  5. Угол границы градиента. Направление линии для равномерного изменения цвета от 0 до 365 градусов.

Все свойства градиент css

Градиент css накладывается на элементы в lending page такие как

  • Градиент кнопки для украшения лендинга.
  • Задний css градиент фона секции.
  • Градиент картинки css с прозрачностью.
  • Css градиент текста большого заголовка.

Создадим простой элемент в теге див с классом grad. Чтобы наложить градиент на класс grad зададим контур с шириной и высотой в файле стилей css. После этого можно добавить свойство градиента, который получился в генераторе градиента css. Gradient задается в свойстве background, затем пишем префикс webkit linear gradient для корректного отображения в разных интернет браузерах. Во вторых пишем какого вида будет градиент, выбираем из трех.

  1. Линейный градиент css. Состоит из двух или больше цветов. Цвет изменяется от одного к другому равномерно по линии, с заданием угла.
  2. Радиальный градиент. Цвет от одного к другому распределяется равномерно в форме круга, внутри элемента.
  3. Повторяющийся градиент со свойством repeating. Подходит к линейному и радиальному.

градиент css примеры

Разберем на примерах все виды градиентов.

1). Пример linear-gradient() линейный градиент

У linear gradient угол наклона задается параметром deg или ключами

  1. to right угол в 90deg.
  2. to left угол будет 270deg.
  3. to top угол равен 0deg.
  4. to bottom угол границы 180deg.

2). Пример radial-gradient() радиальный градиент

С помощью ключа at задаем точку начала радиального градиента.

Задаем размеры элипса в процентах

  1. Первое значение ширина.
  2. Второе высота элипса.

Используем ключ farthest-corner для выставления размера градиента до дальнего угла.

Чтобы градиент стал круглым пишем ключ circle, по умолчанию он в виде ellipse.

Gradient Generator

The tool generates a stepped gradient between 2 colors.

To change one of the colors, you can use the color picker or preselected swatches. Click on one of the boxes to do it.
To control how many you colors you want to generate, use the slider under the boxes.

You can copy colors in formats: HEX, HSL, RGB. Click on the value, and the color will be copied to your clipboard. If you want to invert the gradient, click on the icon between the boxes.

Линейные градиенты в CSS и генераторы градиентов

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

Линейные градиенты — самая простая реализация. При их создании используется функция linear-gradient(), которая задается как свойство для background-image. Например:

Вот что в итоге получается.

Для функции linear-gradient в самом простом варианте используется 3 параметра. Первый задает угол градиент в градусах (в примере выше — 180deg; по умолчанию, если не указывать, также будет 180). Второй и третий параметр — соответственно цвета с какого начинается и заканчивается градиент (в примере от красного red к черному #000000).

Илон Маск рекомендует:  Визуальный сайт в CSS3

При этом вы можете задавать для цветов начало и окончание применения градиента. Например, если использовать следующий код:

То получится такая картинка:

В этом случае золотой цвет (gold) переходит в черный (#000000) начиная с 40% блока и заканчивая 95%. То есть до 40% — это обычный золотой цвет, как и после 95% черный.

В коде можно использовать и более двух цветов.

При этом с помощью градиента вы легко можете создавать полосатый фон. В примере выше цвета используются не особо сочетающиеся (черный, серый, зеленый). Попробуйте такой код:

Кроме линейных градиентов есть еще радиальные. Для них используется функция radial-gradient(). При этом градиент распространяется из центральной точки по круговому или эллиптическому принципу. Выглядит приблизительно так:


Описание и примеры реализации поищите тут + можно нагуглить много других статей по теме (их хватает). Синтаксис там несколько иной, если понадобиться, разберетесь. Однако, думаю, чаще будете сталкиваться именно с линейными градиентами.

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

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

Здесь есть выбор цветов, типа градиента, ползунки для настройки тех или иных параметров. Управление генератором интуитивно понятное. Внизу найдете HTML и CSS код для вставки на сайт.

Отличительными фишками второго генератора я бы назвал, во-первых, наличие парочки цветовых решений градиентов по умолчанию, а во-вторых, комментарии в CSS коде. Из них вы можете понять, какая строка кода к какому браузеру будет применяться. Как видите, стандартная функция linear-gradient дополняется определенными вариантами для разных браузеров. Сервис также поддерживает и радиальные градиенты.

Данный инструмент содержит много разных мелочей и функций, которых нет в предыдущих двух. Настройка чуть более продвинутая. Не будут детально вникать в нюансы, сами потестируете. Единственное, что при копировании CSS в коде имеется зашифрованный фрагмент кода с помощью base64 (что немного странно). Зато есть поддержка iOS.

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

Подборка любимых градиентов

by Andrej — Category Обзоры on 24/08/2020

Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.

  • Что такое градиент?
  • Форма записи градиентов в css
  • Написание цвета градиентов
  • Градиенты с изображениями
  • Градиент для текста
  • Сайты-генераторы градиентов

Сегодня мало кто не знает, что такое градиент, но для галочки, давайте вспомним.

Что такое градиент?

Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины <\displaystyle \varphi >\varphi , значение которой меняется от одной точки пространства
к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении

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

Исходя из этого, давайте посмотрим на пример.

Способ записи градиентов в css

Градиент может быть записан двумя способами:

Какой способ записи использовать — решать вам.

Возвращаемся к примеру. В нем мы указали три значения свойств background :

  • 1. Каким будет градиент — linear-gradient — в данном случае он линейный. В дальнейшем в статье мы будем говорить именно о нем.
  • 2. Указали угол наклона градиентной линии, который показывает направление градиента. Указывать направление можно двумя способами: [ | to ] , где угол измеряется в deg, то есть — градус, или вторым способом
    — указанием позиции от и до. Например, to top , to right , to bottom left и т.д.
  • Значение цвета #****** , которым будет начинаться и заканчиваться градиент.

Написание цвета градиентов

Цвет градиента может быть записан любым доступным обозначением:

  • Hex Color Code — #000000 или сокращением #000;
  • RGB Color Code — rgb(0, 0, 0);
  • Color Name — black;
  • HSL Color Code — hsl(0, 0%, 0%);

Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.

Вот собственно и все базовые знания, необходимые для использования градиентов.

Градиенты с изображениями

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

Давайте посмотрим на пример.

В нем мы создали градиентный фон (код 1) и добавили изображение, с наложенным на него градиентом (код 2).

Градиент для текста

Иногда хочется сделать текст ссылки или заголовка более ярким, заметным и/или заменить обычный текст на какую-нибудь картинку. CSS позволяет нам это сделать, используя следующие свойства:

Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use

Объединение градиентов CSS в режиме Background Blend Mode

Совсем недавно появились еще три новых свойства CSS, которые получили довольно хорошую поддержку в современных браузерах. Эти свойства включают:

  • background-blend-mode, для смешивания фоновых изображений, градиентов и цветов фона
  • mix-blend-mode, для смешивания элементов над другими элементами и, наконец,
  • isolation, менее используемое свойство, применяется в режиме mix-blend, для смешивания элементов.

Давайте немного поговорим о первом. Такие функции, как linear-gradient(), radial-gradient(), и repeating-linear-gradient(), repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный
синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели— паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.

Спектральный фон

Наложим три градиента, чтобы создать фон с почти полным спектром цветов, который можно отобразить на мониторе.


И вот у нас уже получился разноцветный фон. Создание подобного эффекта ранее было возможно только с изображением, вес которого составлял бы десятки килобайт. Но мы только
что воспроизвели этот эффект через CSS менее чем на 200 байт, не говоря уже о сохранении HTTP-запроса.

Создаем плед на css

Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.

В итоге вот что у нас получилось,

Фон сайта с кружочками

Как насчет еще одного, на этот раз с радиальным градиентом:

Результат превосходит все ожидания,

Эффект ночного видения

Давайте теперь попробуем воссоздать еще один эффект с режимами смешивания CSS и сделать фотографию, как будто мы просматриваем ее через объектив очков ночного видения. Возьмем обычное изображение и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — repeating-linear-gradient

И вот результат:

Градиент для border через border-image

Давайте создадим пустой div и сделаем ему градиентную рамку.

Как вы видите, у блока появилась цветная рамка, однако, цвет у нее один. Давайте добавим градиент.

В итоге наш блок будет выглядеть вот так:

Сайты-генераторы градиентов

Здесь небольшая подборка сайтов, позволяющих генерировать градиенты, делать из них canvas, png и svg форматы и копировать для установки в проекты.

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

Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.

Возможно Вас также заинтересует…

Уважаемые дизайнеры, программисты и разработчики! У меня лежат два инвайта на Dribbble. К сожалению, сейчас…

В разработке интернет-проектов, как и в промышленности активно используется термин ЧПУ. Однако здесь он не…

Привет, дорогие читатели! Эта статья может пригодиться веб-мастерам, использующим в работе JSFiddle. В ней я…

Изготовление сайта — это еще не гарант привлечения посетителей. И даже если привлечь их получится,…

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor from ColorZilla.

Enter existing gradient CSS to import

Import from an image-based gradient

H: ° S: % B: % R: G: B: #:
OK
Cancel

Browser compatibility

IE Edge Firefox Chrome Safari Opera iOS Safari Android Browser Chrome for Android
6 — 8

IE9 support (?) Maximize compatibility

What’s new

  • » 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 Compassmixins (needs latest beta of Compass)
  • » Copy to clipboard button for quickly grabbing the generated code
  • » Easy resizing of preview panel by dragging its corner

Previous versions


  • » 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

About

The Ultimate CSS Gradient Editor was created by Alex Sirota (iosart). If you like this tool, check out ColorZilla for more advanced tools such as eyedroppers, color pickers, palette editors and website analyzers.

As you might know, HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects.

Important: You’ll need a recent version of Firefox, Chrome, Safari, Opera or IE to use this Gradient Generator. The resulting CSS gradients are cross-browser — they will work in these browsers and will also fall back to a simpler gradient in older versions of 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!

The main gradient control allows you to:

  • » Adjust the gradient stop position by dragging the stop marker
  • » Adjust the stop color by double clicking on the stop marker
  • » Delete a stop by draggin the stop marker up or down
  • » Add a new stop by clicking anywhere in between the existing stop markers

You can use the ‘Stops’ panel to conrol the color and the position of the currently selected stop more precisely.

The ‘Preview’ panel allows previewing the current gradient as a vertical or horizontal one, and also allows quickly previewing how the Internet Explorer fallback gradient will look in IE.

Finally, the ‘CSS’ panel always has the CSS for the current gradient for easy copying and pasting into your stylesheet. You can also use this panel to import an existing gradient CSS into the tool.

Credits

The ‘Ultimate Web 2.0 Gradients’ preset gradients were derived from work by deziner folio and SGlider12.

The Color Picker is a minor adaptation of John Dyer’s Color Picker.

The Base-64 encoder function is from webtoolkit.

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

Градиент можно сделать конечно же в Pho­to­shop, но иногда можно обойтись и CSS. Сервис предлагает пользователю в режиме онлайн создать необходимый ему градиент, после вам необходимо будет всего-лишь скопировать код и применить его к своему элементу.

Есть несколько причин, которые могут оттолкнуть использовать данный способ создания градиентов, перечислю:
  • Не все браузеры адекватно понимают сгенерированный код. IE к примеру может вообще его не отобразить. На браузерах Opera, Safari, Fire­fox, Chrome работает отлично — проверено.
  • CSS градиент имеет большой размер кода. Согласитесь, лучше порезать картинку и прописать всего одну строку кода, чем вставить десять строк, однако быстрота реализация в CSS градиента выше.
  • Градиент-картинку можно использовать в спрайтах — это очень удобно, если вас заботит скорость загрузки сайта.
  • CSS градиент работает и на событиях hov­er, но опять таки увеличивается объем кода — это огромный минус для некоторых.

В целом в своих проектах я часто использую именно CSS градиенты. Прошло время старых браузеров, а для тех, кто пользуется IE 7 лучше повесить заглушку и сообщить человеку, что он отстал от времени :)

Online Gradient CSS Generator

CSS Gradient transition is now supported by all major browsers but writing the correct code might be difficult. This online linear and radial gradient generator will help you get the code right easily for the desired style.

This gradient generator works with -moz and -webkit prefixes and specifies a fallback background color.
Use the three palettes to pick the colors for your transition. Disable the middle transition with the checkbox, or set its position in percentage with the slider which is set to the middle by default (50%). Pick a linear transition direction or select the radial option.
Click the Use This arrow to send the current styles to the live editor for further adjustments.

Box Shadow

Generate box-shadow
with the desired options.

Font Styler

Select a font family
and style it easily.

Border Radius

Enter the four corners
to get the styles.

Color Picker

Mix RGB, HSV, CMYK colors,
or pick one by name.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL