The Ultimate Guide to Customizing the GoHighLevel Login Page with Custom CSS

The GoHighLevel (GHL) login page serves as the "front door" to your platform. For agencies white-labeling GHL as a SaaS product, this page is a critical touchpoint. A generic login screen reminds clients they are using third-party software, while a branded login page reinforces your agency's professionalism, ensures brand consistency, and provides a seamless UI/UX.

This comprehensive guide covers everything from basic navigation to advanced CSS techniques, providing you with the exact code snippets needed to transform your portal.

1. Prerequisites for Customization of GoHighLevel Login Page

Before you begin, ensure you meet the following requirements:

• Agency Pro (SaaS) Account: Custom CSS requires an Agency Pro or higher plan.
• Agency Level Access: You must be logged in as an Agency Administrator (not at the Sub-Account level).
• Custom Domain: Your agency portal must map to a custom domain (e.g., app.youragency.com).
• Basic CSS Knowledge: A fundamental understanding of CSS is helpful.

2. How to Access the Custom CSS Field in GoHighLevel

To inject custom CSS code into your GoHighLevel instance, follow these steps:

1. Log into your Agency Dashboard.
2. Navigate to Settings (bottom-left menu).
3. Select the Company tab.
4. Scroll down to the Custom CSS text area.
5. Paste your code and click Update Company/Save.

Note: Custom CSS applied here is global. While this code affects the entire dashboard, specific selectors target only the login page.

3. Understanding the GHL Login Page Structure

To customize the GoHighLevel login page effectively, you must target the correct HTML elements. Use your browser's Developer Tools (Right-click > Inspect) to find specific selectors. Common login page selectors include:

• .hl_login: The outermost container for the entire page.
• .hl_login--header: The area containing the logo.
• .hl_login--body: The main login card/form container.
• .hl_login--body .card: The card element inside the body.
• .hl_login .form-control: Text input fields (email, password).
• .hl_login button[type="submit"] or #login-btn: The primary login button.
• .hl-app-logo: The specific class for the agency logo.

4. Comprehensive CSS Template

Copy and paste this template into your Custom CSS field. This template uses CSS Variables at the top for easy brand color management.

1/* ================================================
2   GHL LOGIN PAGE CUSTOMIZATION TEMPLATE
3   ================================================ */
4
5:root {
6  /* Brand Colors */
7  --login-btn-color: #2563eb;
8  --login-btn-hover: #1d4ed8;
9  --login-btn-text: #ffffff;
10  --login-body-bg: #ffffff;
11  --login-input-border: #cbd5e1;
12  --login-input-focus: #2563eb;
13  --login-heading-color: #1e293b;
14  --login-text-color: #475569;
15  --login-link-color: #2563eb;
16
17  /* Background Image URL */
18  --login-bg-image: url("https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80");
19}
20
21/* ---- Full-Page Background ---- */
22body.hl_login {
23  background-image: var(--login-bg-image) !important;
24  background-position: center center !important;
25  background-size: cover !important;
26  background-repeat: no-repeat !important;
27  height: 100vh;
28  position: relative;
29  display: flex !important;
30  align-items: center !important;
31  justify-content: center !important;
32}
33
34/* Dark overlay for better contrast */
35body.hl_login::before {
36  content: '';
37  position: absolute;
38  top: 0; left: 0; right: 0; bottom: 0;
39  background: rgba(0, 0, 0, 0.4);
40  z-index: 0;
41}
42
43.hl_login > * {
44  position: relative;
45  z-index: 1;
46}
47
48/* ---- Login Card Container (Glassmorphism Effect) ---- */
49.hl_login--body {
50  max-width: 440px !important;
51  width: 100% !important;
52  background: rgba(255, 255, 255, 0.9) !important;
53  backdrop-filter: blur(10px) !important;
54  border-radius: 15px !important;
55  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
56  border: 1px solid rgba(255, 255, 255, 0.3) !important;
57  padding: 20px !important;
58}
59
60/* ---- Login Button Styling ---- */
61.hl_login button[type="submit"], 
62.hl_login .btn.btn-blue {
63  background-color: var(--login-btn-color) !important;
64  border-color: var(--login-btn-color) !important;
65  color: var(--login-btn-text) !important;
66  border-radius: 8px !important;
67  min-height: 48px;
68  font-weight: 600;
69  transition: all 0.3s ease-in-out !important;
70  width: 100%;
71}
72
73.hl_login button[type="submit"]:hover {
74  background-color: var(--login-btn-hover) !important;
75  transform: translateY(-2px) !important;
76  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
77}
78
79/* ---- Input Fields ---- */
80.hl_login .form-control {
81  border-radius: 8px !important;
82  border: 1px solid var(--login-input-border) !important;
83  padding: 12px !important;
84}
85
86.hl_login .form-control:focus {
87  border-color: var(--login-input-focus) !important;
88  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
89}
Copy

5. Specific Element Customizations

Background Options

• Solid Color: Replace background-image with background-color: #0f172a !important;.
• Gradient: Use background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;.

Logo Customization

While the GoHighLevel login page pulls your agency logo from Settings > Company, you can override this logo via CSS or adjust its size:

1/* Replace Logo via CSS */
2.hl-app-logo {
3  content: url('https://your-domain.com/your-logo.png') !important;
4  max-width: 200px !important;
5  height: auto !important;
6}
7
8/* Make a dark logo white using filters */
9.hl_login--header img {
10  filter: brightness(0) invert(1);
11}
Copy

Button Variations

• Pill Style: Set border-radius: 50px !important;.
• Ghost Style: Set background: transparent !important; border: 2px solid #2563eb !important; color: #2563eb !important;.

6. Advanced Theme: Dark Mode

For a sleek, modern dark mode login page, use these variable overrides:

1:root {
2  --login-body-bg: #1e293b;
3  --login-input-border: #334155;
4  --login-heading-color: #f1f5f9;
5  --login-text-color: #94a3b8;
6}
7.hl_login .form-control {
8  background: #0f172a !important;
9  color: #f1f5f9 !important;
10}
Copy

7. Mobile Responsiveness

Ensure your GoHighLevel login page works on all devices using media queries:

1@media (max-width: 480px) {
2  .hl_login--body {
3    max-width: 92% !important;
4    padding: 15px !important;
5  }
6  .hl_login--body .heading2 {
7    font-size: 20px !important;
8  }
9}
Copy

8. GHL Login Page Customization Best Practices & Troubleshooting

Critical Tips

• The !important Rule: GoHighLevel's default stylesheets are heavy. You must use !important to ensure your custom styles take precedence.
• CDN Hosting: Host your background images and logos on a fast Content Delivery Network (CDN) or GoHighLevel's Media Library for rapid loading.
• Google Fonts: You can use custom fonts by adding @import url('https://fonts.googleapis.com/...'); at the very top of your Custom CSS box.

Common Issues

• Changes Not Showing: Open the login page in an Incognito/Private window to bypass browser caching.
• Broken Images: Ensure your image URLs are direct links (ending in .jpg or .png) and are publicly accessible.
• Platform Updates: GoHighLevel occasionally updates its DOM structure. If your custom CSS breaks, re-inspect the elements to see if class names have changed.

9. Final Words

Customizing the GoHighLevel login page with custom CSS is one of the highest-impact white-labeling steps you can take. The login page is the first thing clients see, and a branded interface immediately sets the tone for a professional platform experience.

Start the customization process with the complete CSS template provided above, swap in your brand colors and background image, and save the changes. You can always refine individual login page elements (buttons, inputs, typography) over time. Keep a backup of your custom CSS, test the login page on mobile devices, and review the interface after GoHighLevel platform updates to ensure everything stays consistent.