{"id":73,"date":"2026-04-04T19:56:35","date_gmt":"2026-04-04T19:56:35","guid":{"rendered":"https:\/\/ghlcss.com\/blog\/?p=73"},"modified":"2026-04-23T15:36:15","modified_gmt":"2026-04-23T15:36:15","slug":"ghl-css-guide","status":"publish","type":"post","link":"https:\/\/ghlcss.com\/blog\/ghl-css-guide\/","title":{"rendered":"The Ultimate Guide to GHL CSS: How to Style Your Agency Like a Pro"},"content":{"rendered":"<style>.kb-table-of-content-nav.kb-table-of-content-id73_8bebb2-22 .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-id73_8bebb2-22 .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-id73_8bebb2-22 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id73_8bebb2-22 .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-id73_8bebb2-22 .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-id73_8bebb2-22 .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> platform to stand out? Most people use the same basic look. But top agencies use <strong>GHL CSS<\/strong> to make their sites look unique.<\/p>\n\n\n\n<p id=\"p-rc_3c59f448358d739d-41\">CSS stands for Cascading Style Sheets.<sup><\/sup> It is a simple code used to change colors, fonts, and layouts.<sup><\/sup> In this guide, you will learn how to use CSS in GHL to wow your clients.<\/p>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns73_654a89-b1{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns73_654a89-b1 .kt-button{font-weight:normal;font-style:normal;}.kt-btns73_654a89-b1 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns73_654a89-b1 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns73_654a89-b1 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns73_654a89-b1 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns73_654a89-b1 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns73_654a89-b1 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns73_654a89-b1 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns73_654a89-b1\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn73_baeba6-b3.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn73_baeba6-b3.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-btn73_baeba6-b3.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-btn73_baeba6-b3.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-btn73_baeba6-b3 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 GHL CSS?<\/h2>\n\n\n\n<p id=\"p-rc_3c59f448358d739d-42\">GHL CSS is a way to add custom design to your HighLevel account.<sup><\/sup> The standard GHL builder is great, but it has limits. CSS allows you to move beyond those limits.<sup><\/sup> You can change things like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Button colors<\/strong> that glow or change on hover.<\/li>\n\n\n\n<li><strong>Custom fonts<\/strong> that match your brand.<\/li>\n\n\n\n<li><strong>Unique backgrounds<\/strong> for your login pages.<\/li>\n\n\n\n<li><strong>Hidden elements<\/strong> that you don&#8217;t want clients to see.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why Use Custom CSS in GoHighLevel?<\/h2>\n\n\n\n<p>Most agencies want a &#8220;White Label&#8221; feel. This means the platform should look like your own software, not GHL. CSS is the best tool for this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benefits of Custom CSS:<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Brand Trust:<\/strong> Your clients see a professional, custom-made site.<\/li>\n\n\n\n<li><strong>Better User Experience:<\/strong> You can make buttons bigger or forms easier to read.<\/li>\n\n\n\n<li><strong>High Conversions:<\/strong> A better-looking funnel often gets more sales.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Where to Put Your GHL CSS Code<\/h2>\n\n\n\n<p>There are three main places to add your code. Where you put it depends on what you want to change.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. The Agency Level (Global Styling)<\/h3>\n\n\n\n<p>If you want to change the look of the whole dashboard for all clients, go to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings<\/strong> &gt; <strong>Company<\/strong> &gt; <strong>Custom CSS<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. The Funnel or Website Level<sup><\/sup><\/h3>\n\n\n\n<p>If you only want to change one specific landing page, go to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sites<\/strong> &gt; <strong>Funnels<\/strong> &gt; <strong>Settings<\/strong> &gt; <strong>Custom CSS<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. The Form or Survey Level<\/h3>\n\n\n\n<p id=\"p-rc_3c59f448358d739d-49\">To style a specific form, open the Form Builder and find the <strong>Styles<\/strong> tab. There is a box at the bottom for CSS, for <a href=\"https:\/\/ghlcss.com\/tools\/gradient-background\" target=\"_blank\" rel=\"noreferrer noopener\">Gradients<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">GHL Standard Builder vs. Custom CSS<\/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 Builder<\/strong><\/td><td><strong>Custom CSS<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Ease of Use<\/strong><\/td><td>Very Easy (Drag &amp; Drop)<\/td><td>Medium (Needs Code)<\/td><\/tr><tr><td><strong>Design Freedom<\/strong><\/td><td>Limited to Themes<\/td><td>Unlimited<\/td><\/tr><tr><td><strong>Mobile Control<\/strong><\/td><td>Basic<\/td><td>Very Precise<\/td><\/tr><tr><td><strong>Cost<\/strong><\/td><td>Free<\/td><td>Free<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Common GHL CSS Snippets (Copy &amp; Paste)<\/h2>\n\n\n\n<p>Here are a few simple codes you can use right now. Just copy these into your GHL CSS box.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change the Sidebar Color<\/h3>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#cc66ff\"><code>.hl_sidebar {\n  background: #1F2937 !important;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Make Buttons Glow on Hover<\/h3>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#cc66ff\"><code>button:hover {\n  box-shadow: 0 0 15px #7C3AED !important;\n  transition: 0.3s;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Hide the &#8220;Opportunities&#8221; Tab<\/h3>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#cc66ff\"><code>.hl_navItem&#91;data-id=\"opportunities\"] {\n  display: none !important;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How to Find CSS Selectors in GHL<\/h2>\n\n\n\n<p id=\"p-rc_3c59f448358d739d-50\">To change an element, you need to know its &#8220;name&#8221; or <strong>Selector<\/strong>.<sup><\/sup><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open your GHL page in a Google Chrome browser.<\/li>\n\n\n\n<li>Right-click on the element you want to change (like a button).<\/li>\n\n\n\n<li>Click <strong>Inspect<\/strong>.<\/li>\n\n\n\n<li>Look for the text that says <code>class=\"...\"<\/code> or <code>id=\"...\"<\/code>.<\/li>\n\n\n\n<li>Copy that name and use it in your CSS code.<\/li>\n<\/ol>\n\n\n<style>.wp-block-kadence-advancedbtn.kb-btns73_b12479-c8{gap:var(--global-kb-gap-xs, 0.5rem );justify-content:center;align-items:center;}.kt-btns73_b12479-c8 .kt-button{font-weight:normal;font-style:normal;}.kt-btns73_b12479-c8 .kt-btn-wrap-0{margin-right:5px;}.wp-block-kadence-advancedbtn.kt-btns73_b12479-c8 .kt-btn-wrap-0 .kt-button{color:#555555;border-color:#555555;}.wp-block-kadence-advancedbtn.kt-btns73_b12479-c8 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns73_b12479-c8 .kt-btn-wrap-0 .kt-button:focus{color:#ffffff;border-color:#444444;}.wp-block-kadence-advancedbtn.kt-btns73_b12479-c8 .kt-btn-wrap-0 .kt-button::before{display:none;}.wp-block-kadence-advancedbtn.kt-btns73_b12479-c8 .kt-btn-wrap-0 .kt-button:hover, .wp-block-kadence-advancedbtn.kt-btns73_b12479-c8 .kt-btn-wrap-0 .kt-button:focus{background:#444444;}<\/style>\n<div class=\"wp-block-kadence-advancedbtn kb-buttons-wrap kb-btns73_b12479-c8\"><style>ul.menu .wp-block-kadence-advancedbtn .kb-btn73_c85f40-9f.kb-button{width:initial;}.wp-block-kadence-advancedbtn .kb-btn73_c85f40-9f.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-btn73_c85f40-9f.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-btn73_c85f40-9f.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-btn73_c85f40-9f 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 GHL CSS in 2026<\/h2>\n\n\n\n<p>When you add code, follow these simple rules to keep your site running fast.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Keep it Clean<\/h3>\n\n\n\n<p>Don&#8217;t add too much code at once. Only add what you need. Too much code can slow down your page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use the &#8220;!important&#8221; Tag<\/h3>\n\n\n\n<p>GHL has its own styles. To make your custom code work, you often need to add <code>!important<\/code> at the end of your CSS line. This tells the browser to use <strong>your<\/strong> style instead of the default one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Test on Mobile<\/h3>\n\n\n\n<p>Always check your site on a phone. Sometimes a change that looks good on a computer can break the layout on mobile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Does using CSS slow down my GHL site?<\/h3>\n\n\n\n<p>If you use a small amount of clean code, it will not slow down your site. Avoid huge files of unused code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Do I need to be a coder to use GHL CSS?<\/h3>\n\n\n\n<p id=\"p-rc_3c59f448358d739d-51\">No. You can find many &#8220;copy and paste&#8221; snippets online.<sup><\/sup> You just need to know where to paste them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can CSS break my GoHighLevel account?<\/h3>\n\n\n\n<p id=\"p-rc_3c59f448358d739d-52\">CSS only changes how things look.<sup><\/sup> It does not break the way the software works. If something looks wrong, just delete the CSS and it will go back to normal.<sup><\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Is GHL CSS free to use?<\/h3>\n\n\n\n<p id=\"p-rc_3c59f448358d739d-53\">Yes. GoHighLevel does not charge extra for adding your own custom code.<sup><\/sup><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p id=\"p-rc_3c59f448358d739d-54\">Using <strong>GHL CSS<\/strong> is the best way to move from a &#8220;standard&#8221; agency to a &#8220;premium&#8221; one. It gives you the power to create a truly white-labeled experience. Start with small changes, like button colors or font sizes.<sup><\/sup> As you get comfortable, you can build beautiful, custom dashboards that your clients will love.<\/p>\n\n\n\n<p><strong>Ready to start?<\/strong> Pick one snippet from the list above and try it in your sub-account today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want your GoHighLevel (GHL) platform to stand out? Most people use the same basic look. But top agencies use GHL CSS to make their sites look unique. CSS stands for Cascading Style Sheets. It is a simple code used to change colors, fonts, and layouts. In this guide, you will learn how to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":75,"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-73","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\/73","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=73"}],"version-history":[{"count":2,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/posts\/73\/revisions\/77"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media\/75"}],"wp:attachment":[{"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghlcss.com\/blog\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}