CSS Backdrop Filter Generator
Налаштування backdrop filter
Core
Color
Extra
Живе прев’ю
Glass Panel
Backdrop preview
This panel blurs and filters the colorful content behind it.
Blur
Glass
Depth
Frost
Статус
Очікування
Що таке CSS backdrop-filter?
CSS backdrop-filter застосовує візуальні ефекти до контенту позаду елемента, а не до самого елемента. Його часто використовують для glassmorphism-карток, frosted glass overlay, sticky header і напівпрозорих модалок.
Цей генератор допомагає швидко зібрати backdrop-filter, подивитися результат у live preview і скопіювати готовий CSS разом із WebKit-префіксом.
Як користуватися генератором
- Налаштуйте blur, brightness, contrast, saturation та інші параметри.
- Одразу дивіться результат у live preview.
- Скопіюйте саме значення backdrop-filter або повне CSS правило.
- Використайте його разом із напівпрозорим фоном у своєму інтерфейсі.
Поради
- Backdrop filter найкраще виглядає з напівпрозорим фоном, наприклад rgba(255,255,255,0.15).
- Більший blur дає м’якший frosted glass ефект.
- Saturate і brightness можуть зробити фон за склом більш живим.
- Для кращого glassmorphism додай світлий border і м’яку тінь.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.
Генератор CSS Filter
Створюйте та парсьте CSS filter з живим превʼю для blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate та sepia.
Інші інструменти
›
CSS Animation Generator
Генератор CSS animation shorthand, keyframes і готового CSS з live preview.
Інші інструменти
›
CSS Gradient Generator
Генеруйте, парсьте та переглядайте CSS linear і radial gradients онлайн. Безкоштовний генератор градієнтів для розробників і дизайнерів.
Інші інструменти
›
Color Converter
Конвертуй HEX, RGB, RGBA і HSL миттєво у браузері.
Інші інструменти
›
FAQ
Яка різниця між filter і backdrop-filter?
Filter впливає на сам елемент, а backdrop-filter — на те, що видно позаду елемента.
Чому backdrop-filter може бути не видно?
Елемент зазвичай має мати прозорий або напівпрозорий фон, щоб крізь нього було видно контент позаду.
Чи треба додавати -webkit-backdrop-filter?
Так, префіксована версія покращує сумісність у браузерах на WebKit.
Чи підходить backdrop-filter для glassmorphism?
Так, це одна з головних CSS-властивостей для створення frosted glass і glassmorphism-інтерфейсів.