Редактор CSS фильтров к изображению для размещения на сайте. Применив фильтры к фотографии вы получите готовый код стилей <img>.
Применение стилей для фотографий:
- Добавьте ссылку на необходимую вам картинку.
- Настройте фильтры изображения передвигая ползунок
- Скопируйте полученный код изображения на свой сайт.

Какие фильтры применяются для фотографий? Применение фильтров
- Размытие (Blur) - эффект размытия лучше всего подходит для фонов блоков или других изображений. Благодаря размытому фону вы можете легко выразить свои идеи, поделиться своим настроением, добавив несколько значимых слов.
- Яркость (Brightness) - это мера общего количества воспринимаемого света на изображении. Увеличение яркости изображения создает визуальное восприятие большего количества света и увеличение акцента на фото, излучаемого сценой на изображении, уменьшение яркости наоборот затемнит изображение и поможет подчеркнуть наложенный текст.
- Контрастность (Contrast) - это разница в яркости или цвете, которая делает объект (или его представление на изображении или дисплее) различимым. При визуальном восприятии реального мира контраст определяется разницей в цвете и яркости объекта и других объектов в том же поле зрения.
- Оттенки серого (Grayscale) - Изображения в градациях серого отличаются от однобитных двухтональных черно-белых изображений, которые в контексте компьютерной визуализации представляют собой изображения только с двумя цветами : черно-белые (также называемые двухуровневыми или двоичными изображениями ). Изображения в градациях серого имеют много промежуточных оттенков серого.
- Изменение оттенков (Hue Rotate) - это когда указывается угол вокруг цветового круга, по которому будут корректироваться входные образцы цветов. Как это работает: HSL (что означает Hue Saturation Lightness) - это представление цветового пространства RGB компьютерной графики на основе оттенков. Модель HSL считается более интуитивной, чем модель RGB. Это связано с тем, что модель HSL позволяет вам выбрать базовый оттенок, а затем настроить его насыщенность и яркость по своему желанию. Выбор оттенка - это простой вопрос выбора пятна на цветовом круге. Например, красный - 0 градусов, синий - 240 градусов и т. д.
- Непрозрачность (Opacity) - это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности. По умолчанию установлено 100% - полная прозрачность.
- Инвертировать (Invert) - заменять цвета изображения, где красный цвет меняется на голубой, зеленый - на пурпурный, а синий - на желтый, и наоборот. При этом светлые области изображения станут темными и наоборот.
- Насыщать (Saturate) - регулировку насыщенности можно использовать как метод быстрого улучшения цвета изображений или фотографий. Увеличьте насыщенность, чтобы сделать цвета более интенсивными и выделить изображение. Уменьшите насыщенность, чтобы смягчить цвета и сделать изображение более полутоновым. Вы можете легко настроить значения насыщенности цвета с помощью простого ползунка в онлайн-редакторе.
Размыть фото
- Добавляем url фото в строку "Добавить фотографию".
Примечание: фотография не загружается на наш сервер и не сохраняется у нас. Поэтому вы можете не беспокоиться за сохранность и конфиденциальность ваших изображений. Если у вас все равно есть опасения, то не добавляйте фотографию, просто при вставлении изображения замените значение src вставив в него необходимый url.
- Выберете необходимое размытие перемещая ползунок до нужного состояния. Результат виден на изображении слева.
- Скопируйте полученный код из окна "Готовый код", нажатием на кнопку "Скопировать код".
- Вставьте полученный код в нужное место на странице сайта (не в визуальном редакторе), нажатием правой кнопки мыши и выбрав "Вставить" (Win: Ctrl+V, Mac: Command-V).
- Готово. При необходимости подрегулируйте параметр blur(0px) до нужного значения.