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

Кожен генератор CSS-фільтрів дозволяє поєднувати blur(), brightness(), contrast() та решту — але майже ніде порядок не має значення, бо більшість завжди застосовує фільтри в одній фіксованій послідовності. Тут усе інакше: ланцюжок фільтрів — це справжній список зі змінним порядком, побудований на рідному HTML5-перетягуванні, і переставлення двох функцій дійсно змінює відтворені пікселі — так само, як це відбувається у робочому CSS. Blur після hue-rotate виглядає інакше, ніж навпаки, і тепер ви можете побачити різницю ще до публікації.

Завантажте власне фото, і дев’ять функцій — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert та drop-shadow — застосовуватимуться до нього як справжня CSS-декларація `filter` на елементі `<img>`, а не як імітація на заготівці. Додайте функцію з випадаючого списку, перетягніть її рядок вище або нижче, щоб змінити позицію в ланцюжку, поводьте повзунком — і попередній перегляд разом із рядком `filter: ...;` для копіювання оновлюватимуться після кожної зміни. Видалити крок можна окремою кнопкою прямо в цьому ж рядку.

Другий, менший ланцюжок будує значення `backdrop-filter`, застосоване до панелі накладання, розміщеної поверх попереднього перегляду, — так ви бачите ефект матового скла (техніку, що лежить в основі сучасних напівпрозорих панелей навігації та фонів модальних вікон), не зачіпаючи власний ланцюжок фільтрів зображення. Він працює навіть без завантаженого фото — на тлі кольорової заглушки, — тож ви можете налаштувати матову панель за лічені секунди.

Коли вигляд вас влаштовує, скопіюйте CSS прямо з поля виводу або експортуйте справжній PNG: той самий рядок фільтра передається властивості `ctx.filter` контексту Canvas 2D (яка використовує ідентичний синтаксис із властивістю CSS `filter`), а полотно перетворюється на файл для завантаження через `canvas.toBlob()`. Експортоване зображення точно відповідає попередньому перегляду, бо створене тим самим рядком фільтра через той самий механізм відтворення. Усе відбувається локально у вашому браузері; ваше фото нікуди не завантажується.