{"id":6330,"date":"2021-07-15T16:36:00","date_gmt":"2021-07-15T16:36:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=6330"},"modified":"2021-07-09T16:46:26","modified_gmt":"2021-07-09T16:46:26","slug":"10-stunning-glassmorphism-examples","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/inspiration\/10-stunning-glassmorphism-examples\/","title":{"rendered":"10 Stunning Glassmorphism Examples"},"content":{"rendered":"\n<p><strong>Glassmorphism <\/strong>is a term used to describe <strong>UI design<\/strong> that emphasizes light or dark objects, placed on top of colorful backgrounds. A background-blur is placed on the objects which allows the background to shine through \u2013 giving it the impression of frosted glass.<\/p>\n\n\n\n<p>Today, In this post, we\u2019ve collected 10 beautiful examples of this design trend from <strong>CodePen<\/strong>. Have a look and see how you could possibly use this effect in your upcoming projects!<\/p>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/walickialbert\/pen\/xxOvPmb\" target=\"_blank\" rel=\"noreferrer noopener\">Glassmorphism Example<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxOvPmb\" src=\"\/\/codepen.io\/anon\/embed\/xxOvPmb?height=250&amp;theme-id=1&amp;slug-hash=xxOvPmb&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxOvPmb\" title=\"CodePen Embed xxOvPmb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/TurkAysenur\/pen\/ZEpxeYm\" target=\"_blank\" rel=\"noreferrer noopener\">Glassmorphism Creative Cloud App Redesign<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEpxeYm\" src=\"\/\/codepen.io\/anon\/embed\/ZEpxeYm?height=250&amp;theme-id=1&amp;slug-hash=ZEpxeYm&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEpxeYm\" title=\"CodePen Embed ZEpxeYm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/dasshounak\/pen\/QWKKYdj\">Glassmorphic Sign in Form<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWKKYdj\" src=\"\/\/codepen.io\/anon\/embed\/QWKKYdj?height=250&amp;theme-id=1&amp;slug-hash=QWKKYdj&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWKKYdj\" title=\"CodePen Embed QWKKYdj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/dasshounak\/pen\/xxERLqZ\">Glassmorphism Credit\/Debit Card (pure CSS)<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxERLqZ\" src=\"\/\/codepen.io\/anon\/embed\/xxERLqZ?height=250&amp;theme-id=1&amp;slug-hash=xxERLqZ&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxERLqZ\" title=\"CodePen Embed xxERLqZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/Jayasree_0708\/pen\/bGwqaXK\">Glassmorphism Page<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGwqaXK\" src=\"\/\/codepen.io\/anon\/embed\/bGwqaXK?height=250&amp;theme-id=1&amp;slug-hash=bGwqaXK&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGwqaXK\" title=\"CodePen Embed bGwqaXK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/vihanga\/pen\/jOMPoQJ\">Glassmorphism Hello<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOMPoQJ\" src=\"\/\/codepen.io\/anon\/embed\/jOMPoQJ?height=250&amp;theme-id=1&amp;slug-hash=jOMPoQJ&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOMPoQJ\" title=\"CodePen Embed jOMPoQJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/omeal\/pen\/VwKKgjG\">Simple Glassmorphism Example<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwKKgjG\" src=\"\/\/codepen.io\/anon\/embed\/VwKKgjG?height=250&amp;theme-id=1&amp;slug-hash=VwKKgjG&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwKKgjG\" title=\"CodePen Embed VwKKgjG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/quentin-feret\/pen\/QWKqLPx\">Glassmorphism vs Neumorphism Cards<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWKqLPx\" src=\"\/\/codepen.io\/anon\/embed\/QWKqLPx?height=250&amp;theme-id=1&amp;slug-hash=QWKqLPx&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWKqLPx\" title=\"CodePen Embed QWKqLPx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/jspilka95\/pen\/vYXXWOE\">Glassmorphism Animated<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYXXWOE\" src=\"\/\/codepen.io\/anon\/embed\/vYXXWOE?height=250&amp;theme-id=1&amp;slug-hash=vYXXWOE&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYXXWOE\" title=\"CodePen Embed vYXXWOE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3><a href=\"https:\/\/codepen.io\/vinocrazy\/pen\/mdrxYOL\">Glassmorphism Post grid<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdrxYOL\" src=\"\/\/codepen.io\/anon\/embed\/mdrxYOL?height=250&amp;theme-id=1&amp;slug-hash=mdrxYOL&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdrxYOL\" title=\"CodePen Embed mdrxYOL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Glassmorphism is a term used to describe UI design that emphasizes light or dark objects, placed on top of colorful backgrounds. A background-blur is placed on the objects which allows the background to shine through \u2013 giving it the impression of frosted glass. Today, In this post, we\u2019ve collected 10 beautiful examples of this design [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6331,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81],"tags":[86,82,50,203],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/07\/Glassmorphism-Examples.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1E6","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6330"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=6330"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6330\/revisions"}],"predecessor-version":[{"id":6332,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6330\/revisions\/6332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/6331"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=6330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=6330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=6330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}