GHL Login Page Custom CSS: Complete Styling Guide | GHL Experts

The GoHighLevel login page is the front door to your platform. Every time a client or team member logs in, that page either reinforces your brand or reminds them they are using someone else's software. If you are white-labeling GoHighLevel as your own SaaS product, a branded login page is not optional -- it is essential.

The good news is that GHL supports custom CSS at the agency level, and the login page is fully customizable. You can change the background, adjust colors, restyle buttons, and create a login experience that looks like it was built from scratch for your brand.

This guide covers everything you need: where to add your CSS, what each login page element targets, and complete code examples you can copy and customize.

Where to Add Login Page CSS in GoHighLevel

Custom CSS for the login page is added in the same place as all other agency-level CSS:

Log into your GoHighLevel agency dashboard.
Go to Settings > Company.
Scroll to the Custom CSS section.
Paste your CSS code into the field.
Click Save.

The CSS you add here applies globally, including the login page. The login page uses specific class names (prefixed with .hl_login) that make it easy to target without accidentally affecting other parts of the dashboard.

After saving, open your login page URL in an incognito/private browser window to see the changes. This avoids caching issues from your current session.

Understanding the Login Page Structure

Before customizing, it helps to know the key elements of the GHL login page:

`.hl_login` -- The outermost container wrapping the entire login page
`.hl_login--header` -- The header area (typically contains the logo)
`.hl_login--body` -- The main login card/form container
`.hl_login--body .card` -- The card element inside the body
`.hl_login--body .card .card-body` -- The inner content area with form fields
`.hl_login .form-control` -- Text input fields (email, password)
`.hl_login .btn.btn-blue` -- The primary login button
`.hl_login button` -- All buttons on the login page

Now let's style each of these.

Complete Login Page CSS Template

Here is a full, ready-to-use login page customization. Copy this entire block into your Custom CSS field, then adjust the variable values at the top to match your brand.

1/* ================================================
2   GoHighLevel Login Page - Custom Styling
3   How to use: Update the CSS variables below to
4   match your brand colors and images.
5   ================================================ */
6
7:root {
8  /* Brand Colors - Change these to match your brand */
9  --login-btn-color: #2563eb;
10  --login-btn-hover: #1d4ed8;
11  --login-btn-text: #ffffff;
12  --login-body-bg: #ffffff;
13  --login-input-border: #cbd5e1;
14  --login-input-focus: #2563eb;
15  --login-heading-color: #1e293b;
16  --login-text-color: #475569;
17  --login-link-color: #2563eb;
18
19  /* Background Image - Replace with your own URL */
20  --login-bg-image: url("https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80");
21}
22
23/* ---- Full-Page Background ---- */
24.hl_login {
25  background-image: var(--login-bg-image) !important;
26  background-position: center center;
27  background-size: cover;
28  background-repeat: no-repeat;
29  display: flex !important;
30  flex-direction: column !important;
31  justify-content: center !important;
32  align-items: center !important;
33  margin: 0 auto !important;
34  padding: 0 !important;
35  margin-top: -82px !important;
36  height: 100vh;
37  position: relative;
38}
39
40/* Optional: Dark overlay on background image for better contrast */
41.hl_login::before {
42  content: '';
43  position: absolute;
44  top: 0;
45  left: 0;
46  right: 0;
47  bottom: 0;
48  background: rgba(0, 0, 0, 0.4);
49  z-index: 0;
50}
51
52/* Ensure content sits above the overlay */
53.hl_login > * {
54  position: relative;
55  z-index: 1;
56}
57
58/* ---- Header / Logo Area ---- */
59.hl_login--header {
60  background: transparent !important;
61  border-bottom: 0 !important;
62  padding: 0 !important;
63  margin-bottom: 24px !important;
64}
65
66/* ---- Login Card Container ---- */
67div.hl_login--body {
68  max-width: 440px !important;
69  width: 100% !important;
70  background: var(--login-body-bg) !important;
71  border-radius: 12px !important;
72  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
73  overflow: hidden;
74}
75
76.hl_login--body .card {
77  width: 100% !important;
78  max-width: 100% !important;
79  margin: 0 auto !important;
80  box-shadow: none !important;
81  padding: 0 !important;
82  border: none !important;
83}
84
85.hl_login--body .card .card-body {
86  max-width: 100% !important;
87  width: 100% !important;
88  margin: 0 auto;
89  padding: 40px 36px 44px !important;
90}
91
92/* ---- Heading Text ---- */
93.hl_login--body .login-card-heading {
94  margin-bottom: 24px;
95  text-align: center;
96}
97
98.hl_login--body .heading2 {
99  margin-bottom: 8px;
100  font-size: 24px;
101  font-weight: 700;
102  color: var(--login-heading-color);
103}
104
105.hl_login--body p {
106  color: var(--login-text-color);
107  font-size: 0.9rem;
108}
109
110/* ---- Input Fields ---- */
111.hl_login .form-control {
112  background: #ffffff !important;
113  font-size: 0.875rem;
114  color: #1e293b;
115  border: 1px solid var(--login-input-border) !important;
116  border-radius: 8px !important;
117  padding: 12px 14px !important;
118  transition: border-color 0.2s ease, box-shadow 0.2s ease;
119}
120
121.hl_login .form-control:focus {
122  border-color: var(--login-input-focus) !important;
123  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
124  outline: none !important;
125}
126
127.hl_login .form-control::placeholder {
128  color: #94a3b8;
129}
130
131/* ---- Login Button ---- */
132.hl_login .button-holder.form-group {
133  margin: 16px auto 8px !important;
134}
135
136.hl_login .btn.btn-blue,
137.hl_login .btn.btn-blue:active,
138.hl_login .btn.btn-blue:focus,
139.hl_login button[type="submit"] {
140  background-color: var(--login-btn-color) !important;
141  border-color: var(--login-btn-color) !important;
142  color: var(--login-btn-text) !important;
143  border-radius: 8px !important;
144  min-height: 48px;
145  font-size: 0.95rem;
146  font-weight: 600;
147  letter-spacing: 0.02em;
148  transition: all 0.2s ease-in-out;
149  width: 100%;
150}
151
152.hl_login .btn.btn-blue:hover,
153.hl_login button[type="submit"]:hover {
154  background-color: var(--login-btn-hover) !important;
155  border-color: var(--login-btn-hover) !important;
156  transform: translateY(-1px);
157  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
158}
159
160/* ---- Links (Forgot Password, etc.) ---- */
161.hl_login a {
162  color: var(--login-link-color) !important;
163  text-decoration: none;
164  font-weight: 500;
165}
166
167.hl_login a:hover {
168  text-decoration: underline;
169}
170
171/* ---- Responsive Adjustments ---- */
172@media (max-width: 480px) {
173  div.hl_login--body {
174    max-width: 95% !important;
175    margin: 0 10px !important;
176    border-radius: 10px !important;
177  }
178
179  .hl_login--body .card .card-body {
180    padding: 28px 20px 32px !important;
181  }
182}

Customizing Specific Elements

Background Image

The background image is the most impactful single change you can make. To use your own image:

Upload your image to a hosting service, your GHL media library, or a CDN.
Copy the direct URL to the image file.
Replace the URL in the --login-bg-image variable.

1:root {
2  --login-bg-image: url("https://your-domain.com/your-background-image.jpg");
3}

Tips for background images:

Use images that are at least 1920x1080 pixels for sharp display on large screens.
Keep the file size under 500KB. Compress with tools like TinyPNG or Squoosh before uploading.
Choose images with enough contrast so the white login card is clearly visible. The dark overlay in the CSS template helps with this.
Abstract or blurred images work well because they do not compete with the login form for attention.

Solid Color Background (No Image)

If you prefer a clean solid color or gradient instead of an image:

1/* Solid Color Background */
2.hl_login {
3  background-image: none !important;
4  background-color: #0f172a !important;
5}
6
7/* Or use a gradient */
8.hl_login {
9  background-image: none !important;
10  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 50%, #1a1a2e 100%) !important;
11}

If using a solid background, you can remove the ::before overlay from the full template since there is no image to darken.

Brand Logo

GoHighLevel displays your agency logo on the login page automatically, pulled from your agency settings (Settings > Company > Logo). Make sure you have uploaded a high-quality logo there.

To adjust the logo size on the login page specifically:

1/* Logo Sizing */
2.hl_login--header img {
3  max-width: 200px !important;
4  height: auto !important;
5}

For a white logo on a dark background:

1/* White Logo Adjustments */
2.hl_login--header img {
3  max-width: 180px !important;
4  filter: brightness(0) invert(1); /* Makes a dark logo white */
5}

Note: The filter: brightness(0) invert(1) trick works well if you only have a dark version of your logo. For the best results, upload a proper white version of your logo in your agency settings.

Login Button Variations

Rounded Pill Button

1.hl_login .btn.btn-blue,
2.hl_login button[type="submit"] {
3  border-radius: 50px !important;
4  padding: 12px 32px !important;
5}

Ghost/Transparent Button

1.hl_login .btn.btn-blue,
2.hl_login button[type="submit"] {
3  background-color: transparent !important;
4  border: 2px solid #2563eb !important;
5  color: #2563eb !important;
6}
7
8.hl_login .btn.btn-blue:hover,
9.hl_login button[type="submit"]:hover {
10  background-color: #2563eb !important;
11  color: #ffffff !important;
12}

Large, Bold Button

1.hl_login .btn.btn-blue,
2.hl_login button[type="submit"] {
3  min-height: 56px !important;
4  font-size: 1.05rem !important;
5  font-weight: 700 !important;
6  text-transform: uppercase !important;
7  letter-spacing: 0.06em !important;
8}

Input Field Variations

Underline-Style Inputs (No Box Border)

1.hl_login .form-control {
2  border: none !important;
3  border-bottom: 2px solid #e2e8f0 !important;
4  border-radius: 0 !important;
5  padding: 12px 4px !important;
6  background: transparent !important;
7}
8
9.hl_login .form-control:focus {
10  border-bottom-color: #2563eb !important;
11  box-shadow: none !important;
12}

Rounded Inputs

1.hl_login .form-control {
2  border-radius: 50px !important;
3  padding: 12px 20px !important;
4  background: #f8fafc !important;
5  border: 1px solid transparent !important;
6}
7
8.hl_login .form-control:focus {
9  border-color: #2563eb !important;
10  background: #ffffff !important;
11}

Dark-Themed Login Page

Here is a complete dark theme variant for the login card itself (not just the background):

1/* Dark Login Card Theme */
2:root {
3  --login-btn-color: #4fc3f7;
4  --login-btn-hover: #03a9f4;
5  --login-btn-text: #0f172a;
6  --login-body-bg: #1e293b;
7  --login-input-border: #334155;
8  --login-input-focus: #4fc3f7;
9  --login-heading-color: #f1f5f9;
10  --login-text-color: #94a3b8;
11  --login-link-color: #4fc3f7;
12}
13
14.hl_login {
15  background-color: #0f172a !important;
16  background-image: none !important;
17}
18
19.hl_login .form-control {
20  background: #0f172a !important;
21  color: #f1f5f9 !important;
22  border: 1px solid var(--login-input-border) !important;
23}
24
25.hl_login .form-control::placeholder {
26  color: #64748b;
27}

Responsive Considerations

The login page is accessed from phones, tablets, and desktops. The CSS template above includes a basic responsive media query, but here are additional considerations:

Testing on Mobile

After applying your CSS, test the login page on a phone-sized screen. You can simulate this in Chrome DevTools:

Open the login page.
Press F12 to open DevTools.
Click the device toggle icon (or press Ctrl+Shift+M).
Select a mobile device like "iPhone 14" or "Pixel 7."

Common Mobile Fixes

1/* Ensure login card does not overflow on small screens */
2@media (max-width: 480px) {
3  div.hl_login--body {
4    max-width: 92% !important;
5    border-radius: 10px !important;
6  }
7
8  .hl_login--body .card .card-body {
9    padding: 24px 16px 28px !important;
10  }
11
12  .hl_login--body .heading2 {
13    font-size: 20px !important;
14  }
15
16  .hl_login--header img {
17    max-width: 140px !important;
18  }
19}
20
21@media (max-width: 360px) {
22  div.hl_login--body {
23    max-width: 96% !important;
24  }
25}

Troubleshooting

Changes not showing up?

Open your login page in a private/incognito browser window to bypass cache.
Verify the CSS was saved correctly in Settings > Company > Custom CSS.
Check for typos in your CSS, especially missing semicolons or unclosed brackets.

Background image not loading?

Make sure the image URL is a direct link to the file (ending in .jpg, .png, etc.) and is publicly accessible.
Test the URL by pasting it directly into a new browser tab. If it does not load there, it will not load in your CSS.
Avoid hotlinking images from sites that block external requests. Host the image yourself or use a CDN.

Login page looks different in different browsers?

The CSS in this guide uses standard properties supported in all modern browsers (Chrome, Firefox, Safari, Edge).
If you are using backdrop-filter or other newer CSS features, check browser support at caniuse.com.

Styles affecting other pages?

All selectors in this guide are scoped to .hl_login, so they should only apply to the login page. If you see unintended effects elsewhere, double-check that your custom CSS does not include unscoped selectors.

Summary

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

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

How to Customize the GoHighLevel Login Page with Custom CSS (2026)