{"id":117,"date":"2026-04-17T09:27:13","date_gmt":"2026-04-17T09:27:13","guid":{"rendered":"https:\/\/ghlcss.com\/blog\/?p=117"},"modified":"2026-04-23T15:26:38","modified_gmt":"2026-04-23T15:26:38","slug":"ghl-glassmorphism-css","status":"publish","type":"post","link":"https:\/\/ghlcss.com\/blog\/ghl-glassmorphism-css\/","title":{"rendered":"GHL Glassmorphism CSS: How to Create Modern &#8220;Blur&#8221; Effects"},"content":{"rendered":"<style>.kb-table-of-content-nav.kb-table-of-content-id117_f00a46-e8 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;border-top-left-radius:10px;border-bottom-right-radius:10px;}.kb-table-of-content-nav.kb-table-of-content-id117_f00a46-e8 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id117_f00a46-e8 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id117_f00a46-e8 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id117_f00a46-e8 .kb-table-of-content-wrap{border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id117_f00a46-e8 .kb-table-of-content-wrap{border-top:2px solid #cc66ff;border-right:2px solid #cc66ff;border-bottom:2px solid #cc66ff;border-left:2px solid #cc66ff;}}<\/style>\n\n\n<p>Do you want your <strong>GoHighLevel (GHL)<\/strong> funnels to look like a modern mobile app? <strong>Glassmorphism<\/strong> is a design style that uses transparency and blur to create a &#8220;frosted glass&#8221; look. By using <strong>GHL CSS<\/strong>, you can make your forms and sections look like they are floating over your background.<\/p>\n\n\n\n<p>In this guide, we will show you how to use the &#8220;backdrop-filter&#8221; property to create this premium effect. This is a great way to make your <a href=\"https:\/\/ghlcss.com\/blog\/ghl-css-button-styling-guide\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/blog\/ghl-css-button-styling-guide\/\" rel=\"noreferrer noopener\">GHL CSS Buttons<\/a> and cards stand out.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns117_3b5293-7a{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns117_3b5293-7a .kt-button{font-weight:normal;font-style:normal;}.kt-btns117_3b5293-7a .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns117_3b5293-7a .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns117_3b5293-7a .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns117_3b5293-7a .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns117_3b5293-7a .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns117_3b5293-7a .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns117_3b5293-7a .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns117_3b5293-7a\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn117_d97df2-05.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn117_d97df2-05.kb-button{color:var(--global-palette2, #2B6CB0);border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}@media all and (max-width: 1024px){.wp-block-kadence-advancedbtn .kb-btn117_d97df2-05.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}@media all and (max-width: 767px){.wp-block-kadence-advancedbtn .kb-btn117_d97df2-05.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}<\/style><a class=\"kb-button kt-button button kb-btn117_d97df2-05 kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-false  wp-block-kadence-singlebtn\" href=\"https:\/\/link.leadsflex.com\/schedule-quickcall\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"kt-btn-inner-text\">Get a Free Custom Growth Plan Call<\/span><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is Glassmorphism?<\/h2>\n\n\n\n<p>Glassmorphism is all about layers. It makes an element look transparent but slightly blurry, like a sheet of frosted glass. It works best when you have a colorful or high-quality image in the background.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Key Features of Glassmorphism:<\/h3>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items117_fd1e9e-a8:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items117_fd1e9e-a8 ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:0px;margin-right:0px;margin-bottom:var(--global-kb-spacing-sm, 1.5rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items117_fd1e9e-a8 ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items117_fd1e9e-a8 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items117_fd1e9e-a8 ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items117_fd1e9e-a8 kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-117_d2b1c5-dc .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-117_d2b1c5-dc\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>Transparency:<\/strong> You can see the background colors through the element.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-117_43d96d-c1 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-117_43d96d-c1\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>Background Blur:<\/strong> The background behind the element is blurred.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-117_91b833-8a .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-117_91b833-8a\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>Thin Borders:<\/strong> A light white border makes the &#8220;glass&#8221; look real.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-117_f28bb4-10 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-117_f28bb4-10\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\"><strong>Soft Shadows:<\/strong> A subtle shadow gives the element depth.<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Where to Add Glassmorphism CSS in GHL<\/h2>\n\n\n\n<p>To create this look, you need to target a specific <strong>Section<\/strong> or <strong>Row<\/strong>.<\/p>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items117_77b513-b1:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items117_77b513-b1 ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:0px;margin-right:0px;margin-bottom:var(--global-kb-spacing-sm, 1.5rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items117_77b513-b1 ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items117_77b513-b1 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items117_77b513-b1 ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items117_77b513-b1 kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-117_bca397-81 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-117_bca397-81\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Open your GHL funnel builder.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-117_02ac45-a9 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-117_02ac45-a9\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Find the CSS ID of your section (e.g., <code>#section-abc<\/code>).<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-117_b41841-8f .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-117_b41841-8f\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Go to <strong>Settings > Custom CSS<\/strong> and paste the code.<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<p>Before you start, make sure you know how to find your <a href=\"https:\/\/ghlcss.com\/blog\/ghl-css-selectors-targeting-guide\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/blog\/ghl-css-selectors-targeting-guide\/\" rel=\"noreferrer noopener\">GHL CSS Selectors<\/a> so you target the right part of your page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Standard GHL Sections vs. Glassmorphism Design<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Feature<\/strong><\/td><td><strong>Standard GHL Section<\/strong><\/td><td><strong>Glassmorphism CSS<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Background<\/strong><\/td><td>Solid Color or Image<\/td><td>Semi-Transparent Blur<\/td><\/tr><tr><td><strong>Feel<\/strong><\/td><td>Traditional Website<\/td><td>Modern App \/ SaaS Feel<\/td><\/tr><tr><td><strong>Visual Depth<\/strong><\/td><td>Flat<\/td><td>Multi-Layered<\/td><\/tr><tr><td><strong>Border<\/strong><\/td><td>Thick or None<\/td><td>Ultra-Thin &#8220;Glass&#8221; Edge<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The Essential Glassmorphism CSS Snippet<\/h2>\n\n\n\n<p>Copy this code into your GHL account to get the look instantly. Replace <code>#your-section-id<\/code> with your actual ID.<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#cc66ff\"><code>#your-section-id {\n  background: rgba(255, 255, 255, 0.15) !important;\n  backdrop-filter: blur(10px) !important;\n  -webkit-backdrop-filter: blur(10px) !important;\n  border: 1px solid rgba(255, 255, 255, 0.2) !important;\n  border-radius: 20px !important;\n  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Pro Tip: Using Gradients<\/h3>\n\n\n\n<p>Glassmorphism looks amazing when placed over a colorful gradient. Use a bright background to make the &#8220;frosted&#8221; effect more visible to your visitors.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns117_e6aec9-4d{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns117_e6aec9-4d .kt-button{font-weight:normal;font-style:normal;}.kt-btns117_e6aec9-4d .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns117_e6aec9-4d .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns117_e6aec9-4d .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns117_e6aec9-4d .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns117_e6aec9-4d .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns117_e6aec9-4d .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns117_e6aec9-4d .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns117_e6aec9-4d\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn117_824210-50.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn117_824210-50.kb-button{color:var(--global-palette2, #2B6CB0);border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}@media all and (max-width: 1024px){.wp-block-kadence-advancedbtn .kb-btn117_824210-50.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}@media all and (max-width: 767px){.wp-block-kadence-advancedbtn .kb-btn117_824210-50.kb-button{border-top-color:#cc66ff;border-top-style:solid;border-right-color:#cc66ff;border-right-style:solid;border-bottom-color:#cc66ff;border-bottom-style:solid;border-left-color:#cc66ff;border-left-style:solid;}}<\/style><a class=\"kb-button kt-button button kb-btn117_824210-50 kt-btn-size-standard kt-btn-width-type-full kb-btn-global-outline  kt-btn-has-text-true kt-btn-has-svg-false  wp-block-kadence-singlebtn\" href=\"http:\/\/gohighlevel.com\/30-day-trial?fp_ref=leadsflex\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"kt-btn-inner-text\">Claim Your $10K Bonuses + Free Funnels<\/span><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices for Glassmorphism<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Check Browser Support<\/h3>\n\n\n\n<p>Most modern browsers (Chrome, Safari, Edge) support the blur effect. However, some older browsers might just show a transparent box. Always set a &#8220;fallback&#8221; background color just in case.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Don&#8217;t Overuse It<\/h3>\n\n\n\n<p>If every section on your page is &#8220;glass,&#8221; it can become hard for the user to focus. Use it for your main <strong>Lead Form<\/strong> or your <strong>Pricing Cards<\/strong> to make them the center of attention.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Focus on Text Readability<\/h3>\n\n\n\n<p>Because the background is transparent, text can sometimes be hard to read. Use dark text on a light glass effect, or white text on a dark glass effect to keep your <a href=\"https:\/\/ghlcss.com\/blog\/ghl-css-mobile-responsive-guide\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/blog\/ghl-css-mobile-responsive-guide\/\" rel=\"noreferrer noopener\">GHL Mobile Responsive<\/a> score high.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Can I use Glassmorphism on GHL forms?<\/h3>\n\n\n\n<p>Yes! You can apply this code to your form containers to make your opt-in boxes look incredibly modern and professional.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Does the blur effect slow down my site?<\/h3>\n\n\n\n<p>Backdrop blur takes a little bit of &#8220;GPU power&#8221; from the user&#8217;s computer, but for most people, it will not affect the page speed at all.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I change the &#8220;frost&#8221; level?<\/h3>\n\n\n\n<p>Yes. In the code above, change <code>blur(10px)<\/code> to a higher number like <code>20px<\/code> for a thicker frost, or a lower number like <code>5px<\/code> for a clearer look.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p><strong>GHL Glassmorphism<\/strong> is one of the best ways to prove to your clients that you are a top-tier agency. It takes a standard funnel and turns it into a high-end digital experience. Use the snippet above on your next project and watch how it upgrades your design game instantly!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want your GoHighLevel (GHL) funnels to look like a modern mobile app? Glassmorphism is a design style that uses transparency and blur to create a &#8220;frosted glass&#8221; look. By using GHL CSS, you can make your forms and sections look like they are floating over your background. In this guide, we will show&#8230;<\/p>\n","protected":false},"author":1,"featured_media":118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-setup-guides"],"_links":{"self":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":1,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/117\/revisions\/119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media\/118"}],"wp:attachment":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}