Перейти до вмісту
TextArray1.87.0
100% локально

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

Створюйте CSS filter або backdrop-filter з візуальних елементів керування.

Вихід
Пов'язані інструменти
Генератор CSS box-shadowІнструменти розробника
CSS генератор градієнтаІнструменти розробника
Генератор CSS glassmorphismновийІнструменти розробника
ключ i18n дифІнструменти розробника
Конвертер TOML в JSONІнструменти розробника
SQL в JSONІнструменти розробника
Генератор фільтру CSS
Цей інструмент допомагає створити готове до використання CSS властивість filter або backdrop-filter з набору візуальних елементів керування, тому вам не потрібно пам'ятати синтаксис комбінування розмиття, яскравості, контрастності, чорно-білого, зміщення тону, інверсії, прозорості, насиченості, сепії та тіні в одну властивість. Ідеально для тих, хто оформляє галереї фотографій, ефекти наведення, панелі з матовим склом або тематичну обробку зображень без необхідності писати список функцій вручну.
Кожна функція має власне поле, і створене значення містить лише функції, які ви дійсно змінили — тому сторінка просто з невеликим розмиттям залишається короткою замість переліку дев'яти порожних функцій. Поле порядку функцій управляє порядком їх застосування, оскільки фільтри CSS застосовуються зліва направо, і їх переупорядкування може змінити візуальний результат. Два шаблони — ретро та чорно-біле — встановлюють цілу групу значень одночасно для загального вигляду. Перейдіть на backdrop-filter, щоб застосувати фільтр до того, що знаходиться позаду елемента, замість самого елемента — стандартний вибір для ефектів матового скла. Переключіть формат виведення на клас Tailwind.
Все працює локально у вашому браузері — ніщо, що ви вводите, не завантажується та не відправляється ніде. Скопіюйте результат, завантажте його як файл .txt або відправте на вхід іншого інструменту для продовження роботи.
FAQ
Яка різниця між filter та backdrop-filter?
`filter` застосовується до самого елемента та всього, що намальовано всередині нього; `backdrop-filter` застосовується до того, що видно позаду елемента, що створює ефект матового скла над фоном.
Чому порядок функцій фільтру має значення?
CSS застосовує функції фільтру зліва направо, кожна операція виконується на результаті попередньої. Застосування розмиття перед коригуванням контрастності може виглядати інакше, ніж коригування контрастності спочатку, тому переупорядкування може змінити кінцевий вид навіть з однаковими значеннями.
Що роблять шаблони ретро та чорно-біле?
Ретро встановлює теплу комбінацію сепії, насиченості, контрастності, яскравості та легкого зміщення тону; чорно-біле встановлює чорно-біле на 100% з невеликим підвищенням контрастності. Кожен шаблон переопреділяє окремі повзунки під час вибору.
Чи можу я використовувати створений CSS з Tailwind?
Так. Переключіть формат виведення на "Клас Tailwind" і інструмент обгорне ту саму властивість у синтаксис довільної властивості Tailwind, наприклад `[filter:blur(4px)_grayscale(50%)]`, щоб ви могли вставити його прямо в атрибут `class`.
Мої дані десь завантажуються?
Ні. Фільтр створюється повністю у вашому браузері з параметрів, які ви встановили — ніщо не відправляється на сервер.