Генератор стекломорфизма CSS

Создайте замороженное стекло визуально — настройте размытость, прозрачность, насыщенность, границу и тень, а затем скопируйте готовый к производству CSS.

How to use Glassmorphism Generator

1. Выберите светлый или темный фон, затем установите размытие и количество насыщения.
2. Выберите цвет заполнения и отрегулируйте его непрозрачность, чтобы фон отображался.
3. Настройте непрозрачность границы, радиус угла и дополнительную тень, пока карта не будет выглядеть правильно.
4. Нажмите Copy CSS, чтобы скопировать полный набор правил, включая запасной вариант -webkit-backdrop-filter.

Что такое имя?

FAQ

Почему эффект стекла выглядит плоским цветом?

фильтр фона только размывает содержимое, сидящее за элементом. Если за вашей картой нет ничего красочного или занятого, с размытием не с чем работать. Поместите стеклянную карту на изображение или яркий градиент, чтобы увидеть эффект.

Нужна ли мне линия -webkit-backdrop-filter?

Да, для Сафари. Браузеры на основе WebKit, особенно на iOS, по-прежнему требуют префикс -webkit-backdrop-filter. Этот генератор включает его автоматически вместе со стандартным свойством.

Широко ли поддерживается фоновый фильтр?

Он работает во всех текущих версиях Chrome, Edge, Firefox и Safari. Для очень старых браузеров элемент просто показывает свой полупрозрачный фон без размытия, который изящно деградирует.

Related tools

• Border Radius Generator
• CSS Gradient Generator
• Box Shadow Generator
• Color Palette Generator