Генератор стеклянных морфизмов CSS

CSS Glassmorphism Generator — это визуальный редактор стиля пользовательского интерфейса «Масированное стекло», где полупрозрачная поверхность размывает все, что находится позади нее. Вы настраиваете размытие фона, заполняете прозрачность, насыщенность, цвет оттенка и радиус угла с помощью слайдеров, смотрите обновление предварительного просмотра на красочном фоне и копируете точные CSS, которые он производит.

GlassMorphism опирается на свойство Fackdrop-Filter, которое применяет размытие к содержимому элемента, а не к самому элементу. В сочетании с полупрозрачным фоном, краем волос и мягкой тенью он создает многослойный вид стекла, популяризированный современными операционными системами. Правильно правильно распределить баланс, поэтому этот инструмент управляет каждым значением и выводит чистый, копируемый блок.

Все работает в вашем браузере. выберите предустановку, как Frosted, Dark, или Vibrant, точно настройте ползунки, и скопируйте CSS - включая -webkit- префикс фоновый фильтр для более широкой поддержки. Нет учетной записи, нет загрузок, и он продолжает работать в автономном режиме после загрузки страницы.

Эффект зависит от двух свойств, работающих вместе, и он бесшумно терпит неудачу, если какой-либо из них отсутствует. Фильтр заднего плана размывает все, что находится за элементом, поэтому ему нужен частично прозрачный цвет фона, чтобы показать сквозь него: при полной непрозрачности нечего видеть, и при полном отсутствии фона поверхность исчезает. Ему также нужно что-то за ним, что стоит размыть, поэтому эффект выглядит как плоская панель на простом фоне и оживает на фотографии. Две практические затраты. размытие заднего плана - одна из самых дорогих вещей для композита, особенно на большой площади или во время прокрутки. А текст на полупрозрачной поверхности имеет коэффициент контрастности, который меняется с тем, что проходит под ним, поэтому он может пройти проверку контрастности на одном фоне и потерпеть неудачу на другом.

Как генератор CSS стекломорфизма, он начинается с предустановки Frosted, и скопированный блок для этого предустановки читается: фон: rgba (255, 255, 255, 0,2); фоновый фильтр: размытие (10px) насыщение (120%); снова то же значение, что и -webkit-фильтр заднего плана; граница-радиус: 16px; граница: 1px твердый rgba (255, 255, 255, 0,18); и тень коробки: 0 8px 32px rgba (0, 0, 0, 0, 0, 0,12). Нажмите "Темно" и фон изменится на rgba (15, 23, 42, 0,25) с размытием 12px, которое является версией для использования поверх световой фотографии.