{"id":120,"date":"2026-04-22T08:21:52","date_gmt":"2026-04-22T08:21:52","guid":{"rendered":"https:\/\/ghlcss.com\/blog\/?p=120"},"modified":"2026-04-23T15:27:03","modified_gmt":"2026-04-23T15:27:03","slug":"ghl-custom-popup-css-styling-guide","status":"publish","type":"post","link":"https:\/\/ghlcss.com\/blog\/ghl-custom-popup-css-styling-guide\/","title":{"rendered":"GHL Custom Popup CSS: How to Design High-Converting Overlays"},"content":{"rendered":"<style>.kb-table-of-content-nav.kb-table-of-content-id120_724663-26 .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-id120_724663-26 .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-id120_724663-26 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id120_724663-26 .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-id120_724663-26 .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-id120_724663-26 .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> popups to stop being ignored? Most popups look like a basic box that gets in the way of the user. By using <strong>GHL CSS<\/strong>, you can transform your popups into beautiful, modern overlays that match your brand perfectly.<\/p>\n\n\n\n<p>In this guide, we will show you how to style the popup background, add rounded corners, and create custom exit animations. This is a perfect follow-up to our guide on <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 Button Styling<\/a> to ensure your popup&#8217;s CTA looks premium.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns120_dc1188-dd{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns120_dc1188-dd .kt-button{font-weight:normal;font-style:normal;}.kt-btns120_dc1188-dd .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns120_dc1188-dd .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns120_dc1188-dd .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns120_dc1188-dd .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns120_dc1188-dd .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns120_dc1188-dd .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns120_dc1188-dd .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns120_dc1188-dd\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn120_bbf707-11.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn120_bbf707-11.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-btn120_bbf707-11.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-btn120_bbf707-11.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-btn120_bbf707-11 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\">Why Customize Your GHL Popups?<\/h2>\n\n\n\n<p>Popups are one of the best ways to capture leads, but only if they look trustworthy. A custom-designed popup makes your offer feel more valuable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benefits of Custom Popups:<\/h3>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items120_4be1bc-54:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items120_4be1bc-54 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-items120_4be1bc-54 ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items120_4be1bc-54 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items120_4be1bc-54 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-items120_4be1bc-54 kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-120_457951-4e .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-120_457951-4e\"><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>Brand Trust:<\/strong> Your popup shouldn&#8217;t look like an afterthought.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-120_c329a9-e3 .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-120_c329a9-e3\"><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>Better Focus:<\/strong> Use background blur to make the content behind the popup disappear.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-120_d10595-06 .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-120_d10595-06\"><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>Higher ROI:<\/strong> A button that glows or pulses in a popup gets more clicks.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-120_36b30a-cb .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-120_36b30a-cb\"><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>Clean Look:<\/strong> Apply <a href=\"https:\/\/ghlcss.com\/blog\/ghl-glassmorphism-css\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/blog\/ghl-glassmorphism-css\/\" rel=\"noreferrer noopener\">GHL Glassmorphism<\/a> to make your popup look like a modern mobile app.<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Where to Add CSS for GHL Popups<\/h2>\n\n\n\n<p>GHL popups live on your funnel page. To style them:<\/p>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items120_b50e0f-20:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items120_b50e0f-20 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-items120_b50e0f-20 ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items120_b50e0f-20 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items120_b50e0f-20 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-items120_b50e0f-20 kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-120_d5087f-ee .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-120_d5087f-ee\"><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 Funnel Builder.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-120_777466-95 .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-120_777466-95\"><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>.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-120_2065f8-fe .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-120_2065f8-fe\"><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\">Because popups are dynamic, you often need to use specific &#8220;Class&#8221; names to find them.<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Standard GHL Popup vs. Custom CSS Popup<\/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 Popup<\/strong><\/td><td><strong>Custom CSS Popup<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Shape<\/strong><\/td><td>Square Corners<\/td><td>Smooth Rounded Edges<\/td><\/tr><tr><td><strong>Overlay<\/strong><\/td><td>Solid Grey\/Black<\/td><td>Blurred &#8220;Glass&#8221; Overlay<\/td><\/tr><tr><td><strong>Border<\/strong><\/td><td>Thin Black Line<\/td><td>Neon Glow or No Border<\/td><\/tr><tr><td><strong>Animation<\/strong><\/td><td>Simple Fade<\/td><td>Slide-in or Bounce Effects<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Essential GHL CSS Snippets for Popups<\/h2>\n\n\n\n<p>Copy these codes into your CSS box to upgrade your popup design instantly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Rounded Popup Corners<\/h3>\n\n\n\n<p>This makes the main popup box look much softer and more modern.<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#cc66ff\"><code>.modal-content {\n  border-radius: 25px !important;\n  border: none !important;\n  overflow: hidden !important;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. The &#8220;Glass&#8221; Overlay Effect<\/h3>\n\n\n\n<p>This blurs the website content behind the popup so the user focuses only on your offer.<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#cc66ff\"><code>.modal-backdrop {\n  background-color: rgba(0, 0, 0, 0.4) !important;\n  backdrop-filter: blur(8px) !important;\n  -webkit-backdrop-filter: blur(8px) !important;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Styling the Close Button (X)<\/h3>\n\n\n\n<p>Make the close button easier to see or hide it until the user has read your headline.<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#cc66ff\"><code>.close-modal {\n  color: #7C3AED !important;\n  font-size: 24px !important;\n  font-weight: bold !important;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices for Popup Design<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Use &#8220;Mobile-First&#8221; Logic<\/h3>\n\n\n\n<p>Popups can be annoying on a phone if they cover the whole screen. Use our <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 Guide<\/a> to make sure your popup is smaller and easy to close on a smartphone.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Don&#8217;t Block the Content<\/h3>\n\n\n\n<p>Make sure your popup only appears when it provides value. If you use a sticky header, ensure the popup doesn&#8217;t clash with it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Focus on the Headline<\/h3>\n\n\n\n<p>Your popup headline should be the largest text. Use your <a href=\"https:\/\/ghlcss.com\/blog\/ghl-custom-fonts-css-guide\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/ghlcss.com\/blog\/ghl-custom-fonts-css-guide\/\" rel=\"noreferrer noopener\">GHL Custom Fonts<\/a> to make the headline stand out and match your brand&#8217;s voice.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns120_1c855e-7e{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns120_1c855e-7e .kt-button{font-weight:normal;font-style:normal;}.kt-btns120_1c855e-7e .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns120_1c855e-7e .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns120_1c855e-7e .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns120_1c855e-7e .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns120_1c855e-7e .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns120_1c855e-7e .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns120_1c855e-7e .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns120_1c855e-7e\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn120_9ee998-e6.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn120_9ee998-e6.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-btn120_9ee998-e6.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-btn120_9ee998-e6.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-btn120_9ee998-e6 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\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Can I make the popup slide in from the side?<\/h3>\n\n\n\n<p>Yes. You can use CSS &#8220;Keyframes&#8221; to create a slide-in animation instead of the standard fade-in.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I change the color of the popup overlay?<\/h3>\n\n\n\n<p>In the code snippet above, you can change the <code>rgba<\/code> numbers to any color you like (e.g., a dark blue or your brand color).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Will these styles affect all my popups?<\/h3>\n\n\n\n<p>Yes, if you put the code in the Global CSS box. To target just one popup, you can use the specific Page Settings CSS box.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Customizing your <strong>GHL Popups with CSS<\/strong> is a simple way to increase your conversion rate. When an overlay looks professional and clean, users are more likely to stay and read your offer. Try adding a background blur and rounded corners today to see how much better your funnels look!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want your GoHighLevel (GHL) popups to stop being ignored? Most popups look like a basic box that gets in the way of the user. By using GHL CSS, you can transform your popups into beautiful, modern overlays that match your brand perfectly. In this guide, we will show you how to style the&#8230;<\/p>\n","protected":false},"author":1,"featured_media":121,"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-120","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\/120","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=120"}],"version-history":[{"count":1,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/120\/revisions"}],"predecessor-version":[{"id":122,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/120\/revisions\/122"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media\/121"}],"wp:attachment":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media?parent=120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/categories?post=120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/tags?post=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}