Генератор CSS-фильтров — Бесплатно Онлайн
Генерируйте CSS-фильтры с живым предпросмотром.
'/%3E%3Ccircle cx='200' cy='150' r='70' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E)
Who uses the Генератор CSS-фильтров?
- Frontend-разработчики, предварительно просматривающие комбинации фильтров изображений перед применением их в проекте.
- UI-дизайнеры, прототипирующие визуальные эффекты состояния наведения и цветовые темы в CSS.
- Веб-разработчики, изучающие взаимодействие фильтров яркости/контраста/насыщенности перед написанием финального CSS.
How the Генератор CSS-фильтров works
Инструмент загружается со встроенным примером градиентного изображения — опции загрузки нет.
Настройте ползунки фильтров: яркость, контраст, насыщенность (0–200%), поворот оттенка (0–360°), размытие (0–20px), оттенки серого, сепия, инверсия (0–100%).
Комбинируйте несколько фильтров для достижения нужного эффекта; нажмите Reset, чтобы вернуть все ползунки к значениям по умолчанию.
Скопируйте свойство CSS filter из панели вывода для использования в вашем проекте.
Tips & tricks
- Загрузки изображений нет — тестируйте комбинации фильтров на встроенном предпросмотре, затем скопируйте CSS для применения на вашем реальном изображении.
- Фильтры, оставленные на значении по умолчанию (100% яркость, 0 размытия и т.д.), автоматически исключаются из вывода, что делает сгенерированный CSS минимальным.
- opacity() и drop-shadow() не включены здесь как ползунки — добавьте их вручную в скопированное значение filter, если нужно.
- Нажмите Reset, чтобы мгновенно вернуть каждый ползунок к значению по умолчанию и начать заново.
Frequently Asked Questions
Какие CSS-фильтры генерирует этот инструмент?
Восемь фильтров: brightness(), contrast(), saturate(), hue-rotate(), blur(), grayscale(), sepia() и invert(). Все они объединяются в одно свойство filter в этом порядке, пропуская любые, оставленные на значении по умолчанию (без эффекта).
Могу ли я загрузить своё изображение для предпросмотра фильтров?
В данный момент нет — предпросмотр использует встроенное градиентное изображение. Скопируйте сгенерированный CSS фильтра и примените его к своему изображению в проекте, чтобы увидеть на реальном контенте.
Как применить CSS-фильтр к изображению при наведении?
Добавьте фильтр на :hover: .image { filter: none; transition: filter 0.3s; } .image:hover { filter: brightness(1.2) contrast(1.1); } Это создаёт плавные переходы фильтра при наведении мыши.
В чём разница между box-shadow и фильтром drop-shadow?
box-shadow применяется к боксу элемента (прямоугольнику). Фильтр drop-shadow() следует фактической альфа-форме элемента — идеально для PNG-изображений с прозрачностью, где нужно, чтобы тень повторяла контур изображения. Этот инструмент не включает элемент управления drop-shadow; добавьте его вручную в скопированный CSS при необходимости.
Можно ли анимировать CSS-фильтры?
Да. CSS-фильтры анимируемы с помощью transitions и keyframe-анимаций: @keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
Is my data safe when using the Генератор CSS-фильтров?
Completely safe. The Генератор CSS-фильтров processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Генератор CSS-фильтров output in commercial projects?
Yes. The Генератор CSS-фильтров is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Генератор CSS-фильтров follow official standards?
Yes. The Генератор CSS-фильтров is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.