[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism":663,"blog-author-\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism":1453,"i-material-symbols:arrow-back-rounded":1468},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":668,"buttonUrl":668,"category":1439,"date":1440,"description":1441,"draft":1442,"editorsPick":1442,"extension":1443,"featured":1442,"image":1444,"imageAlt":1445,"meta":1446,"navigation":32,"ogImage":668,"ogImageAlt":668,"path":1447,"seo":1448,"stem":1449,"tags":1450,"__hash__":1452},"blog\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism.md","User Interface Principles: Neumorphism and Glassmorphism","Aleru Divine","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc\u002Fauthor.jpeg",null,"aleru-divine",{"type":671,"value":672,"toc":1408},"minimark",[673,677,680,683,688,691,698,709,712,715,718,721,724,729,733,736,739,744,747,752,756,759,762,767,771,774,779,783,786,805,809,812,815,819,827,878,881,884,888,893,903,910,915,921,927,932,937,941,944,948,954,960,964,970,976,980,985,989,995,1001,1005,1011,1017,1021,1026,1029,1033,1037,1042,1045,1050,1054,1062,1066,1071,1075,1078,1081,1086,1089,1092,1095,1099,1102,1105,1108,1113,1116,1121,1125,1128,1148,1152,1155,1158,1168,1171,1175,1179,1185,1191,1195,1201,1207,1211,1216,1220,1223,1227,1233,1239,1243,1249,1255,1259,1264,1268,1271,1275,1283,1286,1289,1292,1298,1303,1307,1313,1319,1323,1329,1335,1338,1342,1348,1354,1358,1361,1367,1373,1377,1382,1386,1395,1399,1402,1405],[674,675,676],"p",{},"It gives the impression that background elements, such as buttons, are present but are only made visible by their projection. Neumorphism creates a continuous surface with bumps all through, giving the details the appearance of being inside the background and sticking out from beneath it. This design aesthetic focuses on contrast, intense colors, and skillfully applied shadows.",[674,678,679],{},"Glassmorphism, on the other hand, harnesses the unique properties of glass to improve designs by giving design elements a transparent or crystaline appearance. It centers attention on the desired content and aids in the addition of a visual hierarchy to your designs.",[674,681,682],{},"With neumorphism and glassmorphism, designers can maintain consistency with the way their designs look even as they design further.",[684,685,687],"h2",{"id":686},"neumorphism-in-user-interfaces","Neumorphism in User Interfaces",[674,689,690],{},"Neumorphism is a form of design that combines a monochromatic color scheme with shadows to give a design component a concrete appearance. Monochromatic refers to a color scheme comprised of variations of one color. The concept of neumorphism is inspired by combining both skeuomorphism and flat design, but birthing a new type of design that appears softer and better-looking.",[674,692,693],{},[694,695],"img",{"alt":696,"src":697},"","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-001.png",[674,699,700,701,708],{},"Neumorphism gives user interface elements powerful yet subtle graphic effects by combining background colors, shadows, forms, gradients, and highlights to give a soft visual effect. It’s scalable and very consistent, so it streamlines and improves user interface. Neumorphism aids UI designers in maintaining visual consistency even as they design and create aesthetically pleasing experiences for the users. ",[702,703,707],"a",{"href":704,"rel":705},"https:\u002F\u002Fwww.usertesting.com\u002Fresources\u002Ftopics\u002Fusability-testing-tools",[706],"nofollow","User testing tools"," can further enhance this process by providing valuable feedback on how users interact with neumorphic elements. With neumorphism, UI elements appear more tangible in appearance, which, in turn, conveys an exemplary user interface and experience.",[674,710,711],{},"A completely white or black background would make distinguishing shadows challenging. Instead, we pick a shade of the color we want, preferably tinted. You need to experiment with colors and shadows to produce a neumorphic design.",[674,713,714],{},"There are two ways of implementing neumorphism:",[674,716,717],{},"        1. Drop shadow",[674,719,720],{},"       2. Inner shadow",[674,722,723],{},"Below is how they appear in UI:",[674,725,726],{},[694,727],{"alt":696,"src":728},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-002.png",[684,730,732],{"id":731},"use-cases-for-neumorphism-in-user-interface-design","Use Cases for Neumorphism in User Interface design",[674,734,735],{},"For user interfaces that use icons extensively, neumorphism is very advantageous because it gives a minimalist yet pleasing type of design that is catchy and user-friendly.",[674,737,738],{},"Here are some use cases for using neumorphism to create a more user-friendly UI:",[740,741,743],"h3",{"id":742},"sign-up-pages","Sign-up Pages",[674,745,746],{},"One of the many cases where neumorphism redefines user interfaces is on signup pages. Using neumorphism makes these page more flexible and user-friendly— instead of bland input fields, it appears new and appealing.",[674,748,749],{},[694,750],{"alt":696,"src":751},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-003.png",[740,753,755],{"id":754},"random-buttons","Random Buttons",[674,757,758],{},"Let’s explore testing the efficiency of neumorphism using buttons. The tendency to blend into the background by having a background color that is the same or almost the same as the underlying element is a key attribute of a neumorphic interface. The primary objective of many buttons is to be distinguished from other elements. To achieve this, most buttons have a background color that keeps them distinct from other elements in the UI. Neumorphism plays a vital role in distinguishing buttons from other elements in a UI.",[674,760,761],{},"For example:",[674,763,764],{},[694,765],{"alt":696,"src":766},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-004.png",[740,768,770],{"id":769},"call-to-action-cards","Call-to-Action Cards",[674,772,773],{},"Another use case for neumorphism is in call-to-action cards, which creates a simple yet classic effect. But, always remember to keep a balance between neumorphism and the user experience!",[674,775,776],{},[694,777],{"alt":696,"src":778},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-005.png",[684,780,782],{"id":781},"requirements-for-implementing-neumorphism","Requirements for Implementing Neumorphism",[674,784,785],{},"We must consider the following to correctly implement neumorphism in our User Interface:",[787,788,789,793,796,799,802],"ul",{},[790,791,792],"li",{},"Neumorphism relies heavily on combining background colors, shadows, gradients, and highlights to give a soft visual effect. The background color must be the same as the element color.",[790,794,795],{},"The box-shadow property is responsible for implementing neumorphism in CSS.",[790,797,798],{},"The box shadow adds a dark shadow to one side of the element and, on the other side, a lighter shadow.",[790,800,801],{},"Neumorphism requires one color with different shadows, tints, or hues to be implemented accurately.",[790,803,804],{},"The edges are usually curved.",[684,806,808],{"id":807},"implementing-neumorphism-with-css","Implementing Neumorphism with CSS",[674,810,811],{},"The box-shadow property is responsible for a neumorphic effect. It is relatively easy to create neumorphism in CSS, taking note of the following: the upper left corner is a light shadow, and the lower right corner is a dark shadow.",[674,813,814],{},"First, let’s look at how the box-shadow property works, and then we’ll add neumorphic effects on elements, form fields, and buttons.",[740,816,818],{"id":817},"the-syntax","The Syntax",[674,820,821,822,826],{},"box-shadow: [horizontal offset][vertical offset][blur radius][spread radius][color][inset][initial]",[823,824,825],"span",{},"inherit",";",[787,828,829,836,842,848,854,860,866,872],{},[790,830,831,835],{},[832,833,834],"strong",{},"Horizontal offset",": A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side.",[790,837,838,841],{},[832,839,840],{},"Vertical offset",": A positive value puts the shadow below the box, and a negative value puts the shadow above the box.",[790,843,844,847],{},[832,845,846],{},"Blur radius",": The higher the number, the more blurred the shadow will be, and the lower the number, the less blurred it will be.",[790,849,850,853],{},[832,851,852],{},"Spread radius",": A positive value increases the size of the shadow, and a negative value decreases the size of the shadow.",[790,855,856,859],{},[832,857,858],{},"Color",": If the color is not specified, the shadow will not b displayed.",[790,861,862,865],{},[832,863,864],{},"Inset",": Changes the shadow from an outer shadow to an inner shadow",[790,867,868,871],{},[832,869,870],{},"Initial",": Sets the property to its default value.",[790,873,874,877],{},[832,875,876],{},"Inherit",": Inherits the property from its parent element.",[674,879,880],{},"The box-shadow property can be written in the following ways:",[674,882,883],{},"box-shadow: 10px 8px 8px 10px #000000;box-shadow: 5px 8px inset;",[684,885,887],{"id":886},"creating-a-neumorphic-element","Creating a Neumorphic Element",[674,889,890],{},[832,891,892],{},"HTML",[894,895,900],"pre",{"className":896,"code":898,"language":899},[897],"language-text","\u003Cdiv class=\"element\">\n\u003C\u002Fdiv>\n","text",[901,902,898],"code",{"__ignoreMap":696},[674,904,905],{},[702,906,909],{"href":907,"rel":908},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=27954d91a1",[706],"Save this code",[674,911,912],{},[832,913,914],{},"CSS",[894,916,919],{"className":917,"code":918,"language":899},[897],".element {\nalign-items: center;\nbackground-color: #ecf0f3;\nbox-shadow: 12px 12px 16px 0 #b5bbc2, -8px -8px 12px 0 #f8fbff;\nborder-radius: 20px;\ndisplay: flex;\nheight: 410px;\njustify-content: center;\nmargin-right: 4rem;\nwidth: 547px;\n}\n",[901,920,918],{"__ignoreMap":696},[674,922,923],{},[702,924,909],{"href":925,"rel":926},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=d45343a12e",[706],[674,928,929],{},[832,930,931],{},"Output",[674,933,934],{},[694,935],{"alt":696,"src":936},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-006.png",[684,938,940],{"id":939},"buttons","Buttons",[674,942,943],{},"The code sample below shows how to style a user interface button in the neumorphic method.",[674,945,946],{},[832,947,892],{},[894,949,952],{"className":950,"code":951,"language":899},[897],"\u003Cdiv class=\"element\">\n  \u003Cdiv class=\"enter\">\n    \u003Cp>Subscribe\u003C\u002Fp>\n  \u003C\u002Fdiv>\n",[901,953,951],{"__ignoreMap":696},[674,955,956],{},[702,957,909],{"href":958,"rel":959},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=c41f4f8429",[706],[674,961,962],{},[832,963,914],{},[894,965,968],{"className":966,"code":967,"language":899},[897],"body {\n  align-items: center;\n  display: flex;\n  height: 100vh;\n  justify-content: center;\n}\n\n.enter {\n  align-items: center;\n  font-weight: bold;\n  background-color: #ecf0f3;\n  box-shadow: \n    5px 5px 10px 0 #b5bbc2, \n    -5px -5px 20px 0 #f8fbff;\n  border-radius: 10px;\n  display: flex;\n  height: 50px; \u002F* Adjusted height for better usability *\u002F\n  width: 100px;\n  color: #545454;\n  padding: 1.3rem;\n  justify-content: center;\n}\n",[901,969,967],{"__ignoreMap":696},[674,971,972],{},[702,973,909],{"href":974,"rel":975},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=e83049ae6f",[706],[674,977,978],{},[832,979,931],{},[674,981,982],{},[694,983],{"alt":696,"src":984},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-007.png",[674,986,987],{},[832,988,892],{},[894,990,993],{"className":991,"code":992,"language":899},[897],"\u003Cdiv class=\"button-container\">\n  \u003Cdiv class=\"buttons\">\n    \u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"icon\">\n      \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z\" \u002F>\n    \u003C\u002Fsvg>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"buttons\">\n    \u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"icon\">\n      \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5\" \u002F>\n    \u003C\u002Fsvg>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"buttons\">\n    \u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"icon\">\n      \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z\" \u002F>\n    \u003C\u002Fsvg>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"buttons\">\n    \u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"icon\">\n      \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z\" \u002F>\n    \u003C\u002Fsvg>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"buttons\">\n    \u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"icon\">\n      \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z\" \u002F>\n      \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \u002F>\n    \u003C\u002Fsvg>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[901,994,992],{"__ignoreMap":696},[674,996,997],{},[702,998,909],{"href":999,"rel":1000},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=6c0e479fa5",[706],[674,1002,1003],{},[832,1004,914],{},[894,1006,1009],{"className":1007,"code":1008,"language":899},[897],"body {\n  align-items: center;\n  display: flex;\n  height: 100vh;\n  justify-content: center;\n}\n\n.buttons {\n  margin-top: 100px;\n  border-radius: 50%;\n  width: 48px;\n  height: 48px;\n  background-color: #E0E5EC;\n  box-shadow: 9px 9px 16px #b5bbc2, -9px -9px 16px #f8fbff;\n  display: flex;\n  margin: 20px;\n}\n\n.icon {\n  color: #545454;\n  width: 24px;\n  height: 24px;\n  margin: auto;\n}\n",[901,1010,1008],{"__ignoreMap":696},[674,1012,1013],{},[702,1014,909],{"href":1015,"rel":1016},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=2f7048a279",[706],[674,1018,1019],{},[832,1020,931],{},[674,1022,1023],{},[694,1024],{"alt":696,"src":1025},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-008.png",[674,1027,1028],{},"Combining the various elements above makes for a cooler and much more user-friendly User Interface when used correctly by combining the right colors, shadows, and tints, as discussed earlier.",[684,1030,1032],{"id":1031},"more-use-cases-of-neumorphism-in-user-interface","More Use Cases of Neumorphism in User Interface",[740,1034,1036],{"id":1035},"alert-pages","Alert Pages",[674,1038,1039],{},[694,1040],{"alt":696,"src":1041},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-009.png",[740,1043,940],{"id":1044},"buttons-1",[674,1046,1047],{},[694,1048],{"alt":696,"src":1049},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-010.png",[740,1051,1053],{"id":1052},"call-to-action-formspages","Call-to-Action Forms\u002FPages",[674,1055,1056,1059],{},[694,1057],{"alt":696,"src":1058},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-011.png",[694,1060],{"alt":696,"src":1061},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-012.png",[740,1063,1065],{"id":1064},"sign-up-pages-1","Sign-Up pages",[674,1067,1068],{},[694,1069],{"alt":696,"src":1070},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-013.png",[684,1072,1074],{"id":1073},"user-interface-design-with-glassmorphism","User Interface Design with Glassmorphism",[674,1076,1077],{},"Glassmorphism imitates the look of tinted glass or a translucent background with a beautiful border and shadow. The user interface elements frequently sit above a contrasting background and give the impression that they are mounted on sheets of glass. Glassmorphism is increasingly popular and probably won't go away anytime soon.",[674,1079,1080],{},"Here is an example:",[674,1082,1083],{},[694,1084],{"alt":696,"src":1085},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-014.png",[674,1087,1088],{},"Simple shapes that float over blurry backgrounds with contrasting colors produce the best results when designed with glassmorphism. The hue and transparency can be selected from light or dark mode as a useful tool for web or app development.",[674,1090,1091],{},"Glassmorphism helps establish a hierarchy because of the addition of sufficient contrast and the differentiation of various User Interface elements.",[674,1093,1094],{},"However, overusing glassmorphism in the UI might make it less user-friendly.",[684,1096,1098],{"id":1097},"use-cases-for-glassmorphism-in-user-interface-design","Use Cases for Glassmorphism in User Interface Design",[674,1100,1101],{},"A use case for the glassmorphism effect is in the unlock screen of iOS phones. This effect gives it transparency and blurs the background color causing a remarkable impact on the entire screen and another on the buttons.",[674,1103,1104],{},"There is always a balance between the background blurring, the shadows, and the element's transparency with the glassmorphic effect. Also, remember that simple figures floating over blurry backgrounds with contrasting colors produce the best results in glassmorphism design.",[674,1106,1107],{},"Another good example is the use case shown below:",[674,1109,1110],{},[694,1111],{"alt":696,"src":1112},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-015.png",[674,1114,1115],{},"Glassmorphism solely depends on the blur effect, so borders give the design more definition and distinguish the element from the background. The transparent effect helps boost the overall appearance of the user interface design itself. The use of colorful backgrounds plays a huge role in glassmorphic design because when an element is placed over it, it highlights it well.",[674,1117,1118],{},[694,1119],{"alt":696,"src":1120},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-016.png",[684,1122,1124],{"id":1123},"attributesproperties-of-glassmorphism","Attributes\u002FProperties of Glassmorphism",[674,1126,1127],{},"The purpose of implementing glassmorphism is to make a balance between these elements in your user interface:",[787,1129,1130,1136,1142],{},[790,1131,1132,1135],{},[832,1133,1134],{},"Transparency:"," The key requirement for implementing glassmorphism is transparency. The element must be made for the top to attract more light and give a transparent effect to improve transparency.",[790,1137,1138,1141],{},[832,1139,1140],{},"Blurred background:"," The blur makes the background image seamlessly blend into the background while still giving an aesthetically pleasing appearance; this is what is remarkable about the idea of glassmorphism. The transparent layers are carefully and correctly positioned over the blurred background. The blurred background also helps give the foreground a glassy look.",[790,1143,1144,1147],{},[832,1145,1146],{},"Border:"," A border surrounding the glassmorphic element highlights it.",[684,1149,1151],{"id":1150},"implementing-glassmorphism-with-css","Implementing Glassmorphism with CSS",[674,1153,1154],{},"The key to creating an ideal glassmorphism effect is choosing the appropriate transparency. Only the fill should be translucent; the form itself shouldn't be. You will achieve a true background blur in this manner.",[674,1156,1157],{},"The following properties are employed to create the glassmorphism effect:",[674,1159,1160,1161,1164,1165,1167],{},"background: linear-gradient()",[1162,1163],"br",{},"\nbox-shadow:(values) rgba();",[1162,1166],{},"\nbackdrop-filter: blur();",[674,1169,1170],{},"Glassmorphism needs a compelling aesthetic element in the user interface to provide the greatest visual impact. This element might be a picture or a shape.",[684,1172,1174],{"id":1173},"creating-a-glass-pane-for-your-user-interface-design","Creating a Glass Pane for Your User Interface Design",[674,1176,1177],{},[832,1178,892],{},[894,1180,1183],{"className":1181,"code":1182,"language":899},[897],"\u003Cdiv class=\"card\">\n\u003C\u002Fdiv>\n  \u003Ch1>eureka\u003C\u002Fh1>\n",[901,1184,1182],{"__ignoreMap":696},[674,1186,1187],{},[702,1188,909],{"href":1189,"rel":1190},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=2918468c8a",[706],[674,1192,1193],{},[832,1194,914],{},[894,1196,1199],{"className":1197,"code":1198,"language":899},[897],"body {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  background-image: linear-gradient(120deg, #72C6EF 0%, #6DD5ED 100%);\n  font-family: 'Squada One', sans-serif; \u002F* Ensure correct font import *\u002F\n}\n\nh1 {\n  position: absolute;\n  z-index: 1;\n  font-size: 200px;\n  letter-spacing: 15px;\n  color: #fff;\n}\n\n.card {\n  width: 250px;\n  height: 350px;\n  z-index: 2;\n  background: rgba(255, 255, 255, 0.05);\n  box-shadow: 0 8px 32px 0 #1f26875e;\n  box-shadow: inset 1px 1px 0.12px #ffffff66, 1px 1px 3px #0000001a; \u002F* Combined box shadows *\u002F\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(10px);\n  border-radius: 5px;\n  border: 0.5px solid #ffffff2e; \u002F* Use solid instead of just border *\u002F\n}\n",[901,1200,1198],{"__ignoreMap":696},[674,1202,1203],{},[702,1204,909],{"href":1205,"rel":1206},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=4f454e9181",[706],[674,1208,1209],{},[832,1210,931],{},[674,1212,1213],{},[694,1214],{"alt":696,"src":1215},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-017.png",[684,1217,1219],{"id":1218},"pagination","Pagination",[674,1221,1222],{},"Another great way to implement glassmorphism is in pagination; glassmorphic objects partially allow you to see the image or colors behind them. The object or element is kept from merging into the background by adding a blur behind it. This blurriness is necessary to keep the text readable, one of the more important elements of user interface design.",[674,1224,1225],{},[832,1226,892],{},[894,1228,1231],{"className":1229,"code":1230,"language":899},[897],"\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Clink rel=\"stylesheet\" href=\"style.css\" \u002F>\n    \u003Ctitle>Pagination\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv class=\"element\">\n        \u003Cul class=\"pagination\">\n            \u003Cli>\u003Ca href=\"link\">\u003C\u003C\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"link\">1\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"link\">2\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"link\">3\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"link\">4\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli class=\"active\">\u003Ca href=\"link\">5\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"link\">>>\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[901,1232,1230],{"__ignoreMap":696},[674,1234,1235],{},[702,1236,909],{"href":1237,"rel":1238},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=4c584cb499",[706],[674,1240,1241],{},[832,1242,914],{},[894,1244,1247],{"className":1245,"code":1246,"language":899},[897],"* {\n    margin: 0;\n    padding: 0;\n    font-family: sans-serif;\n}\n\n.element {\n    position: relative;\n    height: 50vh;\n    width: 100%;\n    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(leonhard-niederwimmer-rdVmRUlD0p8-unsplash.jpg);\n    background-size: cover;\n    background-position: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.element .pagination {\n    position: relative;\n    height: 60px;\n    background: rgba(255, 255, 255, 0.05);\n    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    backdrop-filter: blur(3px);\n    border-radius: 2px;\n}\n\n.element .pagination li {\n    list-style-type: none;\n    display: inline-block;\n}\n\n.element .pagination li a {\n    position: relative;\n    padding: 20px 25px;\n    text-decoration: none;\n    color: #fff;\n    font-weight: 500;\n}\n\n.element .pagination li a:hover,\n.element .pagination li.active a {\n    background: rgba(255, 255, 255, 0.2);\n}\n",[901,1248,1246],{"__ignoreMap":696},[674,1250,1251],{},[702,1252,909],{"href":1253,"rel":1254},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=5ff84e8138",[706],[674,1256,1257],{},[832,1258,931],{},[674,1260,1261],{},[694,1262],{"alt":696,"src":1263},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-018.png",[684,1265,1267],{"id":1266},"more-use-cases-of-glassmorphism-in-user-interface-design","More Use Cases of Glassmorphism in User Interface Design",[674,1269,1270],{},"Glassmorphism needs a compelling aesthetic element to provide the greatest visual impact. This might be a picture or a shape.",[674,1272,1273],{},[832,1274,770],{},[674,1276,1277,1280],{},[694,1278],{"alt":696,"src":1279},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-019.png",[694,1281],{"alt":696,"src":1282},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-020.png",[674,1284,1285],{},"As shown above, the glassmorphic effect is over two photos, or on a bright background made of shapes that are clear and compelling and makes the glassy effect more pronounced.",[674,1287,1288],{},"Let’s look at another example of the glassmorphic concept with the frosted glass effect used in the user interface of a credit card application page.",[674,1290,1291],{},"First, let's create the background using the background property:",[894,1293,1296],{"className":1294,"code":1295,"language":899},[897],"body \n{background: linear-gradient();\n",[901,1297,1295],{"__ignoreMap":696},[674,1299,1300],{},[694,1301],{"alt":696,"src":1302},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-021.png",[674,1304,1305],{},[832,1306,892],{},[894,1308,1311],{"className":1309,"code":1310,"language":899},[897],"\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n    \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n    \u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n    \u003Clink rel=\"stylesheet\" href=\"style.css\" \u002F>\n    \u003Ctitle>GLASSMORPHISM\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[901,1312,1310],{"__ignoreMap":696},[674,1314,1315],{},[702,1316,909],{"href":1317,"rel":1318},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=8ced4f9c06",[706],[674,1320,1321],{},[832,1322,914],{},[894,1324,1327],{"className":1325,"code":1326,"language":899},[897],"* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    background: linear-gradient(to right, #bbd2c5, #536976, #292e49);\n    height: 100vh;\n}\n",[901,1328,1326],{"__ignoreMap":696},[674,1330,1331],{},[702,1332,909],{"href":1333,"rel":1334},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=cefe42a371",[706],[674,1336,1337],{},"Let’s add the glassmorphism effect as we create the credit card. But first, let’s add a few more details to the HTML.",[674,1339,1340],{},[832,1341,892],{},[894,1343,1346],{"className":1344,"code":1345,"language":899},[897],"\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n    \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n    \u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n    \u003Clink rel=\"stylesheet\" href=\"style.css\" \u002F>\n    \u003Ctitle>GLASSMORPHISM\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv class=\"container\">\n        \u003Cdiv class=\"card\">\n            \u003Cform>\n                \u003Cdiv class=\"logo\">\n                    \u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n                        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z\" \u002F>\n                    \u003C\u002Fsvg>\n                \u003C\u002Fdiv>\n                \u003Cdiv class=\"number\">\n                    \u003Cinput id=\"number\" placeholder=\"Enter card number\" type=\"text\" required maxlength=\"19\">\n                \u003C\u002Fdiv>\n                \u003Cbr>\n                \u003Cdiv>\n                    \u003Cdiv class=\"name\">\n                        \u003Cu>\u003Cinput id=\"name\" placeholder=\"Enter name\" type=\"text\" required>\u003C\u002Fu>\n                    \u003C\u002Fdiv>\n                    \u003Cdiv class=\"expiry\">\n                        \u003Clabel>VALID THRU\u003C\u002Flabel>\n                        \u003Cu>\u003Cinput id=\"card-exp\" placeholder=\"Enter expiry\" type=\"text\" required maxlength=\"17\">\u003C\u002Fu>\n                    \u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n            \u003C\u002Fform>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[901,1347,1345],{"__ignoreMap":696},[674,1349,1350],{},[702,1351,909],{"href":1352,"rel":1353},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=3c144e977c",[706],[674,1355,1356],{},[832,1357,914],{},[674,1359,1360],{},"To implement it with CSS, we do the following:",[894,1362,1365],{"className":1363,"code":1364,"language":899},[897],"body {\n    background: linear-gradient(to right, #bbd2c5, #536976, #292e49);\n    height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #ffffff;\n}\n\n.card {\n    height: 260px;\n    width: 420px;\n    border-radius: 20px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(35px);\n    border: 2px solid rgba(255, 255, 255, 0.1);\n    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);\n    padding: 30px 30px 30px 30px;\n    overflow: hidden;\n}\n\n.logo {\n    padding-bottom: 40px;\n    opacity: 0.9;\n    width: 50px;\n}\n\n.group {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n}\n\n.number {\n    position: relative;\n    display: inline-block;\n    overflow: hidden;\n    margin-bottom: 70px;\n}\n\n.underline {\n    transition: all 0.3s;\n    display: inline-block;\n    bottom: 0;\n    left: -100%;\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background-color: #ffffff;\n}\n\n.name {\n    padding: 0px 80px 0px 0px;\n    margin-right: 40px;\n    width: 100px;\n    position: relative;\n    display: inline-block;\n    overflow: hidden;\n}\n\n.expiry {\n    padding: 0px;\n    margin-right: 60px;\n    width: 80px;\n    display: inline-block;\n    overflow: hidden;\n}\n\nlabel {\n    color: white;\n    font-size: 12px;\n    font-weight: normal;\n    pointer-events: none;\n    display: block;\n    padding-bottom: 2px;\n}\n\ninput {\n    border: none;\n    font-size: 16px;\n    height: 26px;\n    color: #ffffff;\n    background: 0;\n}\n\ninput:focus {\n    border-bottom: 2px solid;\n    outline: none;\n    border: none;\n    font-size: 16px;\n    height: 30px;\n    margin-bottom: -2px;\n}\n\ninput:hover {\n    border-bottom: 2px solid;\n    color: none;\n    margin-bottom: -2px;\n    font-size: 16px;\n    height: 30px;\n}\n\ninput[id=\"number\"] {\n    font-size: 30px;\n    width: 100%;\n    height: 50px;\n}\n\ninput[id=\"number\"]::placeholder {\n    font-size: 30px;\n}\n\ninput::placeholder {\n    color: #ffffff;\n}\n",[901,1366,1364],{"__ignoreMap":696},[674,1368,1369],{},[702,1370,909],{"href":1371,"rel":1372},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=af854989d2",[706],[674,1374,1375],{},[832,1376,931],{},[674,1378,1379],{},[694,1380],{"alt":696,"src":1381},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fimg-022.png",[684,1383,1385],{"id":1384},"browser-compatibility","Browser Compatibility",[674,1387,1388,1389,1394],{},"Neumorphism is compatible with the latest forms of Chrome, Edge, Firefox, and Safari, and according to ",[702,1390,1393],{"href":1391,"rel":1392},"https:\u002F\u002Fcaniuse.com\u002F",[706],"caniuse.com",", glassmorphism is supported by most, if not all, browsers.",[684,1396,1398],{"id":1397},"conclusion","Conclusion",[674,1400,1401],{},"Neumorphism is a visually pleasant concept of User Interface design and a popular trend more and more designers and developers are using to enhance user interfaces. It makes user interfaces more usable and aesthetically pleasing to users, although it can be a huge UI drawback when overused. Neumorphism takes cues from both skeuomorphism and flat design. These design philosophies aim to eliminate any flashy elements from the user interface and replace them with a soft look that is consistent throughout a project.",[674,1403,1404],{},"It's a wonderful idea to use neumorphism while creating icons, social buttons, forms, and pagination in the right way with the right color shade combinations. Employing neumorphism lessens the possibility of adopting color schemes that clash, as some people find color combinations difficult.",[674,1406,1407],{},"Glassmorphism has become more useful than most of the other recent styles. Glassmorphism has a shadow feature that elevates the element and provides it the appearance of floating above the surface. As a result, while interacting with the User Interface, the user can subconsciously develop a sense of hierarchy. Although it keeps the UI very sleek and classy, apply glassmorphism to only a few elements of your designs to avoid overuse. Try some neumorphic or glassmorphic effects in your designs today and see the difference they make.",{"title":696,"searchDepth":1409,"depth":1409,"links":1410},2,[1411,1412,1418,1419,1422,1423,1424,1430,1431,1432,1433,1434,1435,1436,1437,1438],{"id":686,"depth":1409,"text":687},{"id":731,"depth":1409,"text":732,"children":1413},[1414,1416,1417],{"id":742,"depth":1415,"text":743},3,{"id":754,"depth":1415,"text":755},{"id":769,"depth":1415,"text":770},{"id":781,"depth":1409,"text":782},{"id":807,"depth":1409,"text":808,"children":1420},[1421],{"id":817,"depth":1415,"text":818},{"id":886,"depth":1409,"text":887},{"id":939,"depth":1409,"text":940},{"id":1031,"depth":1409,"text":1032,"children":1425},[1426,1427,1428,1429],{"id":1035,"depth":1415,"text":1036},{"id":1044,"depth":1415,"text":940},{"id":1052,"depth":1415,"text":1053},{"id":1064,"depth":1415,"text":1065},{"id":1073,"depth":1409,"text":1074},{"id":1097,"depth":1409,"text":1098},{"id":1123,"depth":1409,"text":1124},{"id":1150,"depth":1409,"text":1151},{"id":1173,"depth":1409,"text":1174},{"id":1218,"depth":1409,"text":1219},{"id":1266,"depth":1409,"text":1267},{"id":1384,"depth":1409,"text":1385},{"id":1397,"depth":1409,"text":1398},"Software Development","2023-02-16T00:00:00.000Z","With neumorphism and glassmorphism, designers can improve user experience and maintain consistency among their user interface designs.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism\u002Fhero.jpeg","decorative cover image that shows off neumorphism and glassmorphism in a user interface example",{},"\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism",{"title":665,"description":1441},"blog\u002Fuser-interface-neumorphism-glassmorphism",[1451],"ui; css","4YUphHedvhb32gu0zXzZeh68A-lFFSb75ZtpOIQU7Zg",{"id":1454,"title":666,"body":1455,"description":1459,"draft":1442,"extension":1443,"meta":1462,"navigation":32,"path":1463,"photo":1464,"photoAlt":668,"seo":1465,"stem":1466,"__hash__":1467},"authors\u002Fauthors\u002Faleru-divine.md",{"type":671,"value":1456,"toc":1460},[1457],[674,1458,1459],{},"Aleru is a developer with hands-on experience in JavaScript, Node.js, and CSS. Creator of projects like a Word Scramble game, a dice roll tutorial, and a native server in Node.js. Dedicated to implementing UX best practices and crafting functional, engaging web applications with a strong focus on clean and efficient code.",{"title":696,"searchDepth":1409,"depth":1409,"links":1461},[],{},"\u002Fauthors\u002Faleru-divine","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Faleru-divine.jpeg",{"title":666,"description":1459},"authors\u002Faleru-divine","ZzaZElJFZHRpDh0YLy0o147gOcTC79YAtTzC1dXKx-k",{"left":1469,"top":1469,"width":1470,"height":1470,"rotate":1469,"vFlip":1442,"hFlip":1442,"body":1471},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]