Настройки

Настраивайте стеклянный эффект, фон, тень и экспортируйте готовый код.

Ширина320px

Высота210px

Радиус скругления28px

Прозрачность фона16%

Размытие18px

Толщина границы1px

Прозрачность границы26%

Размытие тени34px

Прозрачность тени18%

Смещение тени X0px

Смещение тени Y18px

Цвет фонаЦвет границыЦвет тениФон предпросмотра

Градиентный оверлейСвечение границыВнутренняя теньВключить размытиеВключить границуВключить тень

Пресеты

Быстрые варианты для популярных стеклянных интерфейсов.

Код

CSS, Tailwind CSS или SCSS для текущего эффекта.

width: 320px;
height: 210px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.26);
box-shadow: 0px 18px 34px rgba(0, 0, 0, 0.18);