Генератор CSS-фильтров
Загрузите изображение (необязательно), подвигайте ползунки и скопируйте значение CSS
filter.
Нажмите или перетащите изображение, чтобы применить предпросмотр к нему, необязательно
Как это работает
Каждый ползунок напрямую соответствует одной функции CSS filter
(blur(), brightness(), contrast(),
saturate(), grayscale(), sepia(),
hue-rotate(), invert()). Функции, оставленные на нейтральном
значении, исключаются из результата, чтобы скопированный CSS оставался минимальным, а
остальные соединяются пробелами — CSS применяет цепочку функций фильтра в том порядке, в
котором они записаны. Именно эта строка устанавливается в стиль filter
самого изображения предпросмотра, так что вы видите настоящий эффект, а не имитацию.
Ваше изображение загружается как локальный object URL и никогда не покидает вкладку браузера — этап загрузки на сервер отсутствует.
Частые вопросы
Можно ли посмотреть предпросмотр на своём изображении?
Да, перетащите любое изображение — и каждый ползунок будет мгновенно обновлять предпросмотр. Если изображение не загружено, ползунки применяются к изображению-заглушке с градиентом.
Влияет ли filter на вёрстку?
Нет. CSS filter — это чисто визуальный эффект, он никогда не меняет размер блока элемента или его положение, в отличие от замены самого файла изображения. Благодаря этому фильтр дёшево переключать по hover или классом — ничего не пересчитывается заново.
Загружается ли моё изображение куда-либо?
Нет. Предпросмотр использует CSS-движок вашего браузера на локальном object URL. Ничего не загружается.