Генератор CSS Filter
Налаштування фільтра
Core
Color
Живе превʼю
Sample
Live filter preview
Changes appear here immediately while you adjust the controls.
Статус
Очікування
Що таке CSS Filter Generator
CSS filters дозволяють застосовувати візуальні ефекти на кшталт blur, contrast або hue rotation прямо в браузері.
Ця тула допомагає будувати filter-рядки, дивитися живе превʼю та розбирати готові CSS filter назад у редаговані контролли.
Як користуватись
- Рухайте слайдери або редагуйте значення вручну.
- Дивіться, як превʼю оновлюється в реальному часі.
- Натисніть Generate, щоб отримати нормалізований рядок filter.
- Вставте готовий filter і натисніть Parse, щоб відредагувати його.
Поради
- Brightness і contrast часто краще працюють у парі.
- Hue rotate та saturate зручні для швидких експериментів із кольорами.
- Grayscale і sepia добре підходять для приглушених або vintage-ефектів.
- Для UI зазвичай краще виглядають невеликі значення blur.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.
CSS Animation Generator
Генератор CSS animation shorthand, keyframes і готового CSS з live preview.
Інші інструменти
›
CSS Transform Generator
Генератор і парсер CSS transform: translate, scale, rotate, skew і transform-origin.
Інші інструменти
›
CSS Gradient Generator
Генеруйте, парсьте та переглядайте CSS linear і radial gradients онлайн. Безкоштовний генератор градієнтів для розробників і дизайнерів.
Інші інструменти
›
Color Converter
Конвертуй HEX, RGB, RGBA і HSL миттєво у браузері.
Інші інструменти
›
FAQ
Які CSS filters підтримуються?
Підтримуються blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate та sepia.
Чи можна розібрати готовий filter?
Так. Вставте CSS filter у поле вводу і натисніть Parse.
Чи оновлюється превʼю одразу?
Так. Превʼю змінюється миттєво при зміні слайдерів або текстових значень.
Чи валідний згенерований CSS?
Так. Тула повертає валідне значення filter і готове CSS правило для копіювання.