background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Что такое генератор стеклянных морфизмов CSS?
CSS Glassmorphism Generator — это визуальный редактор стиля пользовательского интерфейса «Масированное стекло», где полупрозрачная поверхность размывает все, что находится позади нее. Вы настраиваете размытие фона, заполняете прозрачность, насыщенность, цвет оттенка и радиус угла с помощью слайдеров, смотрите обновление предварительного просмотра на красочном фоне и копируете точные CSS, которые он производит.
GlassMorphism опирается на свойство Fackdrop-Filter, которое применяет размытие к содержимому элемента, а не к самому элементу. В сочетании с полупрозрачным фоном, краем волос и мягкой тенью он создает многослойный вид стекла, популяризированный современными операционными системами. Правильно правильно распределить баланс, поэтому этот инструмент управляет каждым значением и выводит чистый, копируемый блок.
Все работает в вашем браузере. выберите предустановку, как Frosted, Dark, или Vibrant, точно настройте ползунки, и скопируйте CSS - включая -webkit- префикс фоновый фильтр для более широкой поддержки. Нет учетной записи, нет загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Эффект зависит от двух свойств, работающих вместе, и он бесшумно терпит неудачу, если какой-либо из них отсутствует. Фильтр заднего плана размывает все, что находится за элементом, поэтому ему нужен частично прозрачный цвет фона, чтобы показать сквозь него: при полной непрозрачности нечего видеть, и при полном отсутствии фона поверхность исчезает. Ему также нужно что-то за ним, что стоит размыть, поэтому эффект выглядит как плоская панель на простом фоне и оживает на фотографии. Две практические затраты. размытие заднего плана - одна из самых дорогих вещей для композита, особенно на большой площади или во время прокрутки. А текст на полупрозрачной поверхности имеет коэффициент контрастности, который меняется с тем, что проходит под ним, поэтому он может пройти проверку контрастности на одном фоне и потерпеть неудачу на другом.
Как использовать генератор CSS Glassmorphism?
Выберите предустановленный
Начните с матового, светлого, темного, яркого или тонкого, чтобы получить сбалансированный вид стекла, а затем усовершенствуйте его, чтобы он соответствовал вашему дизайну.
Настройте стакан
Перетащите ползунки фона, прозрачность и насыщенность, выберите цвет оттенка и установите радиус угла. Предварительный просмотр обновляется на красочном фоне, поэтому размытие видно.
Переключить границу
Включите или выключите границу волос. Тонкая 1px полупрозрачно-белая край продает стеклянную кромку, особенно на более темном фоне.
Скопируйте CSS
Скопируйте сгенерированный блок - фон, фоновый фильтр (с префиксом -webkit-), бордер-радиус, бордер и тень - и вставьте его на свою карту или панель.
Основные характеристики
Контроль размытия фона
Специальный ползунок размытия приводит в движение фоновый фильтр, который замораживает все, что находится за элементом - ядром эффекта стекла
Полная стайлинга
Прозрачность, насыщенность, цвет оттенка, радиус углов и опциональная кайма для волос позволяют вам набрать точный вид стекла
Живой превью
Предварительный просмотр сидит над красочным градиентом, так что вы можете видеть, как размытие фона работает, мгновенно обновляясь при редактировании.
Префиксный выход
Выход включает в себя как фоновый фильтр, так и префикс -webkit-backdrop-filter, поэтому эффект работает в Safari и других браузерах WebKit
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!