GoHighLevel Custom CSS: Funnels & Websites (2026)

By Dr Priya Jaganathan, GoHighLevel Certified Admin · HL Growth Partner, Australia · Updated 1 October 2026 · 10 min read

Most agency builds reach a point where the builder runs out of road, and GoHighLevel custom CSS is what buys the last ten per cent: pill buttons, a sticky header, form fields that finally match the brand kit.

The trouble is that it is easy to write and easy to break. Selectors that work on Tuesday stop working once you clone the page or deploy a snapshot. This guide covers where the CSS belongs, how to target elements so the styling survives, and the jobs it should never be doing.

Where GoHighLevel custom CSS actually lives, and which scope to pick

Code enters a HighLevel page in four places, and picking the wrong one is the usual reason CSS turns up on pages you never touched.

Page-level Custom CSS is the default home

Open a page in the builder and the settings bar exposes a Custom CSS option that opens a popup for your code, as HighLevel's funnel builder documentation (2026) describes. The same bar holds Tracking Code, SEO Meta Data and Canonical Links.

Start here for anything that belongs to one page — a styled opt-in, a bespoke pricing table, a one-off hero.

Funnel-level reach comes from the tracking code fields

At funnel level, the Settings tab holds Head Tracking Code and Body Tracking Code alongside domain, path, favicon, image optimisation and GDPR-compliant fonts, per HighLevel's funnel settings documentation (2026). A style block there applies one rule set across every page in the funnel — right for brand tokens, but it carries a cost.

HighLevel's troubleshooting documentation (2026) notes tracking codes are injected client-side, so they never appear in the static source. Funnel-level CSS therefore arrives after first paint, which can flash unstyled content — worth watching alongside GoHighLevel funnel page speed.

The Code element, and the agency field people confuse it with

The Code element sits in the Custom section of the elements panel as a box labelled Custom HTML/JavaScript, and HighLevel's builder documentation (2026) notes it renders only in preview or live.

Agency Settings → Company → Whitelabel then offers Custom Code (JS & CSS), which HighLevel's help documentation (2026) describes as code to style your agency dashboard. That field styles the CRM interface, not your funnels.

How to target HighLevel's generated IDs and classes without breaking your CSS

The builder nests content as sections, then rows, then columns, then elements, and every wrapper gets machine-generated markup. That is where fragility starts.

Add your own classes; stop depending on generated IDs

Custom class names exist because generated IDs are unstable. The request on HighLevel's ideas board explained that when an element is transferred the ID changes, so the CSS no longer works — and HighLevel confirmed the field was added in January 2021.

Treat the generated ID as a debugging aid and your own class as the contract. Add a prefixed class in the element settings and the styling travels through copies, clones and snapshot deployments.

/* Brittle: the generated ID changes when the element is copied */
#section-k2Jd81Pq .c-button { border-radius: 999px; }

/* Durable: a class you added yourself in the builder */
.hlgp-cta .c-button,
.hlgp-cta button {
  border-radius: 999px;
  letter-spacing: .02em;
  transition: transform .15s ease, box-shadow .15s ease;
}

.hlgp-cta .c-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 33, 60, .22);
}

Inspect first, write second

HighLevel does not publish the class names its builder generates, so read them off the rendered page. Its own troubleshooting documentation (2026) uses that technique, telling you to inspect the page preview and search for the custom code wrapper class when hunting a rogue snippet.

Keep specificity low enough to maintain and high enough to win. MDN explains a single ID outranks any number of classes, and that !important is a last resort rather than a strategy.

Why responsive HighLevel custom CSS still needs your own breakpoints

The builder gives you two device views. Font sizes are the only setting holding separate desktop and mobile values at once, per HighLevel's builder documentation (2026); other differences mean duplicating a section and marking one copy mobile-only.

There is no tablet view. A request to add tablet view and custom breakpoints to the site builder was still marked in progress on HighLevel's ideas board as at February 2026.

The bands below are authoring choices, not platform settings.

@media (min-width: 768px) and (max-width: 991px) {
  .hlgp-hero { padding: 48px 24px; }
  .hlgp-hero h1 { font-size: clamp(28px, 5vw, 40px); }
  .hlgp-cta .c-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hlgp-cta .c-button { transition: none; transform: none; }
}

Test by dragging the browser window, not by trusting the builder preview — and note that choosing between the HighLevel website builder and funnels changes none of it.

A practical custom CSS snippet library you can paste today

Swap hlgp- for your own prefix; each snippet assumes the class is already on the element.

Brand tokens, defined once

:root {
  --brand-ink:    #0f213c;
  --brand-accent: #ff6a3d;
  --brand-line:   #cfd8e3;
  --radius-pill:  999px;
}

.hlgp-cta .c-button {
  background: var(--brand-accent);
  border-radius: var(--radius-pill);
}

Tokens are the highest-leverage habit in HighLevel CSS. A rebrand becomes four lines in one place instead of hex codes hunted across every page.

Form fields with a visible focus state

.hlgp-form input[type="text"],
.hlgp-form input[type="email"],
.hlgp-form input[type="tel"],
.hlgp-form select,
.hlgp-form textarea {
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  min-height: 48px;
  font-size: 16px; /* stops iOS zooming on focus */
}

.hlgp-form input:focus-visible,
.hlgp-form textarea:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

No effect? The form is embedded rather than native, so the styling belongs in the form editor's Styles panel — including for multi-step forms with conditional logic.

A sticky header that does not fight the builder

.hlgp-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
}

/* Sticky silently fails if an ancestor clips overflow */
.hlgp-page,
.hlgp-page .c-section { overflow: visible; }

Hiding elements, the honest way

@media (max-width: 767px) {
  .hlgp-hide-mobile { display: none !important; }
}

Prefer the builder's device visibility toggles in the Advanced panel — documented behaviour the next admin will find. Either way, a hidden image is still downloaded, so hiding is a layout tool, not a performance one.

Four jobs where custom CSS is the wrong tool

Using CSS on a structural problem leaves you maintaining a stylesheet nobody understands.

• Changing what is on the page. CSS cannot add or reorder content. Edit the section, or use the Code element.
• Behaviour and timing. Scroll triggers, countdowns and delays are JavaScript.
• Analytics and pixels. Those belong in the tracking code fields or a container — see Google Tag Manager setup for funnels.
• Hiding a broken template. If three sections are hidden on mobile, the template is wrong.

One more constraint: funnel settings include an Optimize Javascript toggle which, per the same documentation (2026), lazy-loads custom JavaScript and HTML added to the funnel. If a Code element renders late, check that toggle before rewriting the snippet.

Keeping HighLevel custom CSS maintainable across sub-accounts and snapshots

Agency CSS fails at scale for a boring reason: nobody can tell which rules are still needed.

• One prefix per agency, so builder classes and your classes are never confused.
• A header comment block in every Custom CSS field: what it styles, who wrote it, the date, what breaks it.
• Tokens at funnel level, components at page level.
• A canonical source outside HighLevel — the builder field is a deployment target, not the master copy.

The last habit is non-negotiable once snapshots are involved. CSS inside a page travels with it, unreviewed, into every sub-account, so what ships inside snapshots you build, sell and deploy needs version control like the rest of the build.

Per-sub-account CSS and JavaScript fields were still a pending request on HighLevel's ideas board as at February 2026, so sub-account-specific styling means per-funnel CSS, not a single switch.

Then audit quarterly. Two references worth keeping open are HighLevel's troubleshooting guide for funnels, websites and webinars and MDN's specificity reference.

Common mistakes to avoid

• Styling against generated element IDs. HighLevel's ideas board records that IDs change when elements are transferred.
• Pasting funnel CSS into Agency → Company → Whitelabel. That field styles the CRM dashboard, not your pages.
• Bare element selectors at funnel level. Rules on p, a or button leak into builder markup you never meant to touch.
• Treating mobile view as a full responsive test. With no tablet view, the 768 to 991 pixel band behaves only if you write a query for it.
• Styling an embedded form from page CSS. Use the form or survey editor's own Styles panel instead.
• Shipping undocumented CSS inside a snapshot. The next admin inherits rules with no owner.

If you want your HighLevel funnels and websites to match your brand exactly — without brittle CSS that breaks at the next builder update — book a strategy call with the HL Growth Partner team.

Book Your Strategy Call →

Frequently asked questions

Where do I add custom CSS in GoHighLevel funnels and websites?

Open the page in the funnel or website builder and use the Custom CSS option in the top settings bar, which opens a popup for your code. HighLevel's funnel builder documentation describes this flow. For CSS that should apply to every page of a funnel, place a style block in the funnel-level Head Tracking Code field instead.

Is GoHighLevel custom CSS page-level or funnel-level?

The Custom CSS field in the builder applies to the page you are editing. There is no single field that styles all pages of a funnel, so agencies either repeat the CSS per page or inject it from the funnel Settings tab using Head Tracking Code. Because tracking codes are injected client-side, funnel-level CSS applies slightly later than page-level CSS.

Can I add a custom class or ID to an element in the HighLevel builder?

Yes. HighLevel confirmed on its own ideas board that a custom classname field was added to the funnel builder in January 2021, after users reported that generated element IDs change when elements are copied. Add your own prefixed class and write your CSS against it, treating generated IDs as debugging aids only.

Why does my GoHighLevel custom CSS stop working after I copy a page or load a snapshot?

Almost always because the CSS targets an element ID the builder regenerated. HighLevel's ideas board records the same problem: the ID changes when an element is transferred, so the CSS matches nothing. Rewrite the selectors against custom classes you added yourself and they survive copies, clones and snapshots.

Can custom CSS style a GoHighLevel form or survey?

Forms and surveys have their own custom CSS box in the Styles panel of their editor, and that is where field styling belongs. Page-level Custom CSS frequently cannot reach inside an embedded form, so rules written there appear to do nothing. If input styling has no visible effect, move it into the form editor rather than increasing specificity.

Does custom CSS slow down GoHighLevel funnel pages?

A small inline stylesheet is cheap, but HighLevel's troubleshooting documentation warns that external scripts or CSS loaded via tracking code or custom code elements can negatively affect page speed performance. Keep CSS inline rather than fetching a remote stylesheet, and remember that hiding an image with CSS does not stop the browser downloading it.

Can I use custom CSS to make a GoHighLevel page responsive on tablets?

Yes, and at present you have to. The builder offers desktop and mobile views only, and a request to add tablet view and custom breakpoints was still marked in progress on HighLevel's ideas board as at February 2026. Write your own media query for roughly the 768 to 991 pixel band to control padding, type sizes and column collapses.

Related Articles on HL Growth Partner

Set the foundations up properly

• Connecting domains and DNS to HighLevel funnels
• Setting up the HighLevel blog builder for SEO
• Handling funnel redirects and 404 pages

Lift conversion on the pages you have

• Running split tests on HighLevel funnels
• Building exit-intent popups that convert

Run the agency side

• White label branding for your HighLevel agency
• Managing images and storage in the media library