{"slug":"glassmorphism","title":{"en":"Glassmorphism","ja":"グラスモーフィズム"},"summary":{"en":"Frosted-glass UI panels: translucent cards with background blur, thin light borders, floating over vivid gradients.","ja":"すりガラス風のUI。背景ぼかしの半透明カードに細い明るい境界線を付け、鮮やかなグラデーションの上に浮かせる。"},"categories":["uiux","design"],"subAspects":["uiux.style"],"aspects":["uiux"],"tags":["ui","translucent","blur","gradient"],"palette":[{"name":"Deep Indigo","hex":"#1E1B4B","ratio":0.35},{"name":"Electric Violet","hex":"#7C3AED","ratio":0.2},{"name":"Hot Pink","hex":"#EC4899","ratio":0.15},{"name":"Cyan Glow","hex":"#22D3EE","ratio":0.1},{"name":"Glass White 20%","hex":"#FFFFFF33","ratio":0.2}],"keywords":["glassmorphism","frosted glass","backdrop blur","translucent card","vivid gradient background","soft glow"],"traits":{"en":["Cards use a semi-transparent white fill (10–25%) with backdrop-filter: blur(16–32px)","A 1px light border (white at ~30%) defines the glass edge","Background is a saturated multi-color gradient or blurred blobs; the glass needs something to blur","Soft, large shadows; rounded corners 16–24px","Text stays high-contrast white; avoid stacking many glass layers"],"ja":["カードは半透明の白（10〜25%）で塗り、backdrop-filter: blur(16〜32px)をかける","1pxの明るい枠線（約30%の白）でガラスの縁を表す","背景は彩度の高い多色のグラデーションか、ぼかした色の塊。ガラスの下にぼかす対象が必要","柔らかく大きな影。角丸は16〜24px","文字はコントラストの高い白のまま。ガラスを何枚も重ねない"]},"prompt":"Glassmorphism UI dashboard, frosted translucent cards with backdrop blur and thin white borders, floating over a vivid gradient background of deep indigo, violet, hot pink and cyan blobs, rounded corners, soft glow, clean white sans-serif text, minimal icons","negativePrompt":"flat opaque cards, skeuomorphic texture, low contrast text, cluttered layout","contrasts":[],"images":[],"references":[{"label":"MDN: backdrop-filter","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter"}],"links":{"page":{"ja":"https://visual-gallery.asami.tokyo/ja/styles/glassmorphism","en":"https://visual-gallery.asami.tokyo/en/styles/glassmorphism"},"json":"https://visual-gallery.asami.tokyo/api/v1/styles/glassmorphism","markdown":"https://visual-gallery.asami.tokyo/api/v1/styles/glassmorphism/md"}}