Генератор CSS фільтрів

Регулюйте ефекти розмиття та яскравості за допомогою повзунків, генеруючи CSS код filter у режимі попереду

ОновленняДодано CSS фільтр генератор, регулюйте розмиття та яскравість для створенняПереглянути оновлення

Особливості

9 видів ефектів на повзунках

Попередній перегляд та CSS код змінюються одночасно при кожному переміщенні

Спробуйте зі своїм зображенням

Завантажте своє зображення у браузері й перевірте ефекти

Натискайте, щоб видіти оригінал

Порівняйте зображення до та після застосування ефекту на місці

Коригуйте від 8 шаблонів

Почніть зі шаблонів сепії або вінтажу та настройте детально

Як користуватися

Виберіть зображення

Натисніть «Виберіть своє зображення» й вкажіть файл. Якщо не вибрати, спробуйте вбудоване зразкове зображення

Настройте ефекти

Виберіть найближчий за атмосферою шаблон або настройте силу ефектів за допомогою повзунків

Порівняйте до й після

Натисніть «Порівняти з оригіналом» — зображення без ефекту показуватиметься, поки ви утримуватимете кнопку

Скопіюйте код

Натисніть кнопку «Копіювати» й вставте рядок filter у свій CSS

Сценарії використання

Читаємість тексту на фоновому фото

Розмийте фонове фото й покладіть читаємий заголовок зверху

Уніфікація кольорів фотографій

Зробіть всі фото на командній сторінці або в галереї чорно-білими чи сепією

Визначення значень для своїх фотографій

Застосуйте до реальної фотографії й виберіть значення для приглушеного або вінтажного вигляду

Коригування зображень для темного режиму

Знизьте яскравість та контраст, щоб зображення не сліпило на темному фоні

Базові знання

Функції filter та одиниці вимірювання

Властивість CSS filter впливає на вигляд зображень або елементів через функції типу blur та sepia, розділені пробілами.

px (пікселі)：Функція blur задає радіус розмиття в px. При значенні 4px кольори змішуються в радіусі 4 пікселів.
% (відсотки)：Функції brightness та sepia задають силу ефекту у %. Для brightness 100% — оригінальна яскравість, 120% — на 20% яскравіше.
deg (градуси)：Функція hue-rotate повертає колір на колірному колі на кут у deg. При 180deg колір переходить на протилежну сторону спектра.

Чому порядок застосування впливає на результат

Функції в filter застосовуються зліва направо, кожна наступна ефект накладається на результат попередньої. Тому порядок функцій може змінити вигляд. Наприклад, чорно-біла обробка, потім сепія, залишає коричневий відтінок; але якщо спочатку сепія, потім чорно-біла, коричневий зникає. У цьому інструменті порядок зафіксований, але ви можете змінити його, редагуючи згенерований CSS код.

Відмінність від backdrop-filter

filter та backdrop-filter використовують одні й ті самі функції, але відрізняються об'єктом застосування.

filter：filter впливає на сам елемент (зображення, текст та ін.).
backdrop-filter：backdrop-filter впливає на те, що видно позаду елемента, створює ефект матового скла.