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 Glassmorphism Generator — это визуальный редактор стиля пользовательского интерфейса «Масированное стекло», где полупрозрачная поверхность размывает все, что находится позади нее. Вы настраиваете размытие фона, заполняете прозрачность, насыщенность, цвет оттенка и радиус угла с помощью слайдеров, смотрите обновление предварительного просмотра на красочном фоне и копируете точные CSS, которые он производит.
GlassMorphism опирается на свойство Fackdrop-Filter, которое применяет размытие к содержимому элемента, а не к самому элементу. В сочетании с полупрозрачным фоном, краем волос и мягкой тенью он создает многослойный вид стекла, популяризированный современными операционными системами. Правильно правильно распределить баланс, поэтому этот инструмент управляет каждым значением и выводит чистый, копируемый блок.
Все работает в вашем браузере. Выберите предустановку, например, матовую, темную или яркую, настройте ползунок и скопируйте CSS, включая фильтр -webkit-префикс для более широкой поддержки. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Начните с матового, светлого, темного, яркого или тонкого, чтобы получить сбалансированный вид стекла, а затем усовершенствуйте его, чтобы он соответствовал вашему дизайну.
Перетащите ползунки фона, прозрачность и насыщенность, выберите цвет оттенка и установите радиус угла. Предварительный просмотр обновляется на красочном фоне, поэтому размытие видно.
Включите или выключите границу волос. Тонкая 1px полупрозрачно-белая край продает стеклянную кромку, особенно на более темном фоне.
Скопируйте созданный блок — фон, фоновый фильтр (с префиксом -webkit-), border-radius, border и shadow — и вставьте его на карту или панель.
Специальный ползунок Blur управляет фильтром фона, который замораживает все, что находится за элементом — ядро стеклянного эффекта.
Прозрачность, насыщенность, цвет оттенка, радиус углов и опциональная кайма для волос позволяют вам набрать точный вид стекла
Предварительный просмотр сидит над красочным градиентом, так что вы можете видеть, как размытие фона работает, мгновенно обновляясь при редактировании.
Выход включает в себя как фоновый фильтр, так и префикс -webkit-backdrop-filter, поэтому эффект работает в Safari и других браузерах WebKit
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!