Генератор CSS-фильтров
Наглядно настройте CSS-фильтр (размытие, яркость, контраст, насыщенность, оттенки серого, сепия, инверсия, поворот оттенка) на тестовом изображении, а затем скопируйте полученный код filter. Ничего не отправляется на сервер: всё вычисляется прямо в вашем браузере.
Как это работает
CSS-свойство filter применяет графические эффекты (размытие, яркость, контраст...) прямо в браузере, не изменяя исходное изображение. Этот инструмент позволяет сочетать несколько эффектов сразу на живом предпросмотре, а затем получить точное значение для вставки в таблицу стилей — для изображения, миниатюры в галерее или эффекта при наведении.
Изменяет ли CSS-фильтр исходный файл изображения?
Нет. filter — это чисто визуальный эффект, применяемый браузером при отрисовке элемента: файл изображения на диске остаётся нетронутым. Чтобы получить окончательно изменённое изображение, его нужно перерисовать на canvas и экспортировать.
Можно ли анимировать CSS-фильтр при наведении?
Да: если сочетать это свойство с правилом :hover и transition для filter, эффект будет плавно переходить из одного состояния в другое. Это распространённый приём для миниатюр портфолио и карточек товаров.
Ни изображения, ни данные не передаются на сервер: фильтр вычисляется только в вашем браузере.