Settings

Tune the glass effect, background, shadow, and export ready-to-use code.

Width320px

Height210px

Border Radius28px

Background Opacity16%

Blur18px

Border Width1px

Border Opacity26%

Shadow Blur34px

Shadow Opacity18%

Shadow Offset X0px

Shadow Offset Y18px

Background ColorBorder ColorShadow ColorPreview Background

Presets

Fast variants for popular glass interfaces.

Code

CSS, Tailwind CSS, or SCSS for the current effect.

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);