ホーム Design Toolsグラスモーフィズム生成

グラスモーフィズム生成

ガラス風のCSS効果を生成。背景のぼかしと透明度を調整してリアルなガラス表現を作成。

Glass EffectThis is a glassmorphism preview card with customizable blur, opacity, and border settings.

Background Color

#6366f1

Blur: 16px

Transparency: 25%

Border Opacity: 20%

Border Radius: 16px

CSS Code

/* Glassmorphism */
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);