GoHighLevel Login Page CSS V3: Complete Custom Styling Code for White-Label Agencies

The login page is the first thing your clients see when they access your white-labeled GoHighLevel platform. A generic login screen undermines the professional image you are trying to build. This V3 login page CSS template gives you full control over the look and feel of your GHL login page using only CSS -- no JavaScript required.

This template uses CSS custom properties (variables) for easy color customization, includes Font Awesome icons for the username and password fields, and transforms the default login layout into a clean, centered design that looks like a custom-built application.

What This CSS Template Changes

The V3 login CSS transforms the following elements of the default GoHighLevel login page:

• Background: Full-viewport solid color background (replaces the default white)

• Login card: Transparent card that blends with the background for a seamless look

• Input fields: Rounded inputs with inset shadows and custom background colors

• Icons: Font Awesome user and lock icons positioned next to each input field

• Login button: Custom colored button with an arrow icon

• Labels: Hidden form labels for a cleaner visual design

• Footer links: Styled forgot password and footer text with custom colors

• Error messages: Custom colored error text for failed login attempts

How to Apply the Login CSS

1. Log into your GoHighLevel agency account.

2. Navigate to Settings > Company.

3. Scroll to the Custom CSS section.

4. Paste the CSS code below into the Custom CSS field.

5. Click Save.

The styles will apply to the login page for all sub-accounts under your agency.

The Complete Login CSS V3 Code

Copy the entire block below and paste it into your Custom CSS field. Then adjust the color variables in the :root section to match your brand.

1/*  Login Page CSS V3 - Color Variables */
2:root {
3  --login-button-background-color: #fff;
4  --login-button-background-hover-color: #fff;
5  --main-body-background-color: #02b0ac;
6  --input-box-background-color: #fff;
7  --login-heading-color: #ffffff;
8  --login-button-text-color: #02b0ac;
9  --login-icon-color: #02b0ac;
10  --login-error-text-color: rgb(255, 16, 16);
11  --login-input-label-color: #fff;
12  --login-otp-text-color: #fff;
13  --login-forgot-password-text-color: #000;
14  --login-footer-text-color: #fff;
15  --login-footer-link-color: rgb(0, 0, 0);
16}
17
18.hl_login {
19  background-position: center center;
20  background-size: cover;
21  background-repeat: no-repeat;
22  display: flex !important;
23  flex-direction: column !important;
24  justify-content: center !important;
25  align-items: center !important;
26  margin: 0 auto !important;
27  padding: 0 !important;
28  margin-top: 0px !important;
29  height: 100vh;
30  background: var(--main-body-background-color);
31}
32
33.hl_login--header {
34  background: #fff0 !important;
35  border-bottom: 0 !important;
36  padding: 0 !important;
37  margin-bottom: 0px !important;
38  display: flex;
39}
40
41div.hl_login--body {
42  max-width: 550px !important;
43  width: 100% !important;
44  background: var(--main-body-background-color) !important;
45  border-radius: 10px !important;
46  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
47  padding-left: 30px;
48}
49
50.hl_login--body .card {
51  width: 100% !important;
52  max-width: 100% !important;
53  margin: 0 auto !important;
54  box-shadow: none !important;
55  padding: 0 !important;
56  margin: 0 !important;
57  background: rgba(255, 255, 255, 0);
58}
59
60.hl_login--body .card .card-body {
61  max-width: 100% !important;
62  width: 100% !important;
63  margin: 0 auto;
64  padding-top: 0px;
65  padding-bottom: 0px;
66}
67
68.hl_login .form-control {
69  background: var(--input-box-background-color) !important;
70  font-size: 0.875rem;
71  color: #2a3135;
72  border: 1px solid #bdbdbd !important;
73  border-radius: 50px !important;
74  padding: 15px 10px !important;
75  box-shadow: inset 5px 0px 10px 1px rgba(0, 0, 0, 0.16);
76}
77
78.hl_login--body .login-card-heading {
79  margin-bottom: 20px;
80  text-align: center;
81}
82
83.hl_login--body .heading2 {
84  margin-bottom: 10px;
85  font-size: 25px;
86  color: var(--login-heading-color);
87  border-bottom: 3px solid #fff;
88  line-height: 3rem;
89}
90
91.hl_login .button-holder.form-group {
92  margin: 10px auto !important;
93}
94
95.hl_login--body .heading2 {
96  margin-bottom: 10px;
97  font-size: 25px;
98  color: #fff;
99}
100
101.hl_login--body .form-group label {
102  display: none;
103}
104
105.hl_login--body .foot-note {
106  font-size: 0.75rem;
107  text-align: center;
108  margin-top: 30px;
109  color: #fff;
110}
111
112.hl_login--body a {
113  color: #02504e !important;
114}
115
116.hl_login--body div.form-group {
117  position: relative;
118  display: flex;
119  flex-direction: column;
120  justify-content: center;
121}
122
123/* Username field icon */
124.hl_login--body
125  .form-group:nth-child(2)
126  .hl-text-input-container
127  > .relative::before {
128  content: "\f007";
129  font-size: 25px;
130  font-family: "Font Awesome 5 Free";
131  font-weight: 900;
132  position: absolute;
133  left: -60px;
134  color: var(--login-icon-color);
135  background: #fff;
136  width: 50px;
137  height: 50px;
138  text-align: center;
139  border-radius: 50px;
140  display: flex;
141  align-items: center;
142  justify-content: center;
143  top: 50%;
144  transform: translateY(-50%);
145}
146
147/* Password field icon */
148.hl_login--body
149  .form-group:nth-child(3)
150  .hl-text-input-container
151  > .relative::before {
152  content: "\f023";
153  font-size: 25px;
154  font-family: "Font Awesome 5 Free";
155  font-weight: 900;
156  position: absolute;
157  left: -60px;
158  color: var(--login-icon-color);
159  background: #fff;
160  width: 50px;
161  height: 50px;
162  text-align: center;
163  border-radius: 50px;
164  display: flex;
165  align-items: center;
166  justify-content: center;
167  top: 50%;
168  transform: translateY(-50%);
169}
170
171/* Login button icon */
172.hl_login--body .form-group:nth-child(4) button::before {
173  content: "\f0a9";
174  font-size: 25px;
175  font-family: "Font Awesome 5 Free";
176  font-weight: 900;
177  position: absolute;
178  left: -60px;
179  color: var(--login-icon-color);
180  background: #fff;
181  width: 50px;
182  height: 50px;
183  text-align: center;
184  border-radius: 50px;
185  top: 50%;
186  transform: translateY(-50%);
187  display: flex;
188  align-items: center;
189  justify-content: center;
190}
191
192.hl_login .sm\:text-sm {
193  min-height: 50px;
194}
195
196.hl_login button {
197  background-color: var(--login-button-background-color);
198  color: var(--login-button-text-color);
199  min-height: 55px;
200}
201
202.hl_login .hover\:bg-curious-blue-600:hover,
203.hl_login button:hover {
204  background-color: var(--login-button-background-hover-color) !important;
205}
206
207.hl_login #email-error {
208  color: var(--login-error-text-color);
209}
210
211.hl_login .hl-text-input-label {
212  color: var(--login-input-label-color);
213}
214
215.hl_login .font-semibold.cursor-pointer.text-curious-blue-500 {
216  color: var(--login-input-label-color);
217}
218
219.hl_login [for="otp-for-email"],
220.hl_login [for="otp-for-phone"] {
221  color: var(--login-otp-text-color);
222}
223
224.hl_login .forgot-password {
225  color: var(--login-forgot-password-text-color);
226}
227
228.hl_login .foot-note {
229  color: var(--login-footer-text-color);
230}
231
232.hl_login .foot-note a {
233  color: var(--login-footer-link-color);
234}

Customizing the Color Variables

All colors in this template are controlled through CSS custom properties in the :root section. Here is what each variable controls:

| Variable | What It Controls | Default Value |

|----------|-----------------|---------------|

| --main-body-background-color | Full page background color | #02b0ac (teal) |

| --login-button-background-color | Login button background | #fff (white) |

| --login-button-background-hover-color | Button hover state | #fff (white) |

| --login-button-text-color | Button text color | #02b0ac (teal) |

| --input-box-background-color | Input field background | #fff (white) |

| --login-heading-color | "Sign In" heading color | #ffffff (white) |

| --login-icon-color | Font Awesome icon color | #02b0ac (teal) |

| --login-error-text-color | Error message text | rgb(255, 16, 16) (red) |

| --login-input-label-color | Input label text | #fff (white) |

| --login-otp-text-color | OTP verification text | #fff (white) |

| --login-forgot-password-text-color | Forgot password link | #000 (black) |

| --login-footer-text-color | Footer text color | #fff (white) |

| --login-footer-link-color | Footer link color | rgb(0, 0, 0) (black) |

Example: Dark Theme Login Page

To create a dark-themed login page, change the variables to:

1:root {
2  --main-body-background-color: #1a1a2e;
3  --login-button-background-color: #4fc3f7;
4  --login-button-background-hover-color: #0390d6;
5  --login-button-text-color: #1a1a2e;
6  --input-box-background-color: #16213e;
7  --login-heading-color: #e0e0e0;
8  --login-icon-color: #4fc3f7;
9  --login-error-text-color: #ff6b6b;
10  --login-input-label-color: #8899aa;
11  --login-otp-text-color: #8899aa;
12  --login-forgot-password-text-color: #4fc3f7;
13  --login-footer-text-color: #8899aa;
14  --login-footer-link-color: #4fc3f7;
15}

Example: Brand Color Login Page

Replace the teal with your brand's primary color. For example, if your brand uses navy blue:

1:root {
2  --main-body-background-color: #07233d;
3  --login-button-background-color: #fcba02;
4  --login-button-background-hover-color: #e5a800;
5  --login-button-text-color: #07233d;
6  --login-icon-color: #fcba02;
7  --login-forgot-password-text-color: #fcba02;
8  --login-footer-link-color: #fcba02;
9}

How the Template Works

Layout Structure

The CSS transforms the default GHL login layout into a vertically and horizontally centered design that fills the full viewport height. The .hl_login class gets flexbox centering, and the card and body elements have their default backgrounds and shadows removed so the login form floats cleanly against the solid background color.

Icon System

The template uses CSS ::before pseudo-elements to inject Font Awesome 5 icons next to each input field. The icons are displayed in white circular badges positioned to the left of the inputs:

• User icon (\f007): Appears next to the email/username field

• Lock icon (\f023): Appears next to the password field

• Arrow icon (\f0a9): Appears next to the login button

These icons use the Font Awesome 5 Free font that is already loaded by GoHighLevel, so no additional font imports are needed.

Input Styling

Input fields get rounded corners (border-radius: 50px), an inset box shadow for a subtle depth effect, and custom padding. The form labels are hidden (display: none) to keep the design clean, relying on placeholder text instead.

Troubleshooting

Icons not appearing

If the Font Awesome icons do not show up, check that GoHighLevel is loading Font Awesome 5 Free. In some cases, GHL updates may change the included icon library. You can verify by inspecting the page source for Font Awesome CSS references.

Styles not applying

Make sure you are pasting the CSS into the correct location. The custom CSS field is found at Settings > Company > Custom CSS at the agency level. If styles are not taking effect, try adding !important to any rules that are being overridden.

Login form shifted to the right

The padding-left: 30px on .hl_login--body accounts for the icon width. If you remove the icons, you should also remove this padding to keep the form centered.

Mobile responsiveness

This template is designed to work on both desktop and mobile. The max-width of 550px on the login body ensures the form does not stretch too wide on large screens, and the flexbox centering keeps it properly positioned on smaller devices. If the icons overlap on very small screens, you can hide them with a media query:

1@media (max-width: 480px) {
2  .hl_login--body .form-group .hl-text-input-container > .relative::before,
3  .hl_login--body .form-group:nth-child(4) button::before {
4    display: none;
5  }
6  div.hl_login--body {
7    padding-left: 0;
8  }
9}

Comparing Login CSS Versions

This V3 template focuses on a clean, icon-based design with a solid color background. If you are looking for other approaches:

• Background image login pages: You can replace background: var(--main-body-background-color) on .hl_login with a background-image property pointing to a hosted image URL.

• Split-screen layouts: More advanced CSS can create a two-column login layout with branding on one side and the form on the other.

• Gradient backgrounds: Replace the solid color with a CSS gradient for a more dynamic look.

The V3 template provides a solid foundation that you can extend in any of these directions while keeping the icon system and input styling intact.

GoHighLevel Login Page CSS V3: Complete Custom Styling Code for White-Label Agencies

GoHighLevel Login Page CSS V3: Complete Custom Styling Code for White-Label Agencies

What This CSS Template Changes

How to Apply the Login CSS

The Complete Login CSS V3 Code

Customizing the Color Variables

Example: Dark Theme Login Page

Example: Brand Color Login Page

How the Template Works

Layout Structure

Icon System

Input Styling

Troubleshooting

Icons not appearing

Styles not applying

Login form shifted to the right

Mobile responsiveness

Comparing Login CSS Versions

Want to try HighLevel?