Why This Is Useful
Sooner or later somebody asks you to change how a standard Salesforce page looks. Hide a section, recolour a header, shrink something that’s taking up half the screen.
And you discover there’s no supported way to do it. Salesforce owns that markup, and your components live inside shadow DOM that can’t reach out.
So I built an open source Lightning Web Component called the Salesforce CSS Injector, which does exactly what it sounds like: it injects CSS into out of the box Salesforce pages, configured entirely through Custom Metadata.
It’s free and on GitHub.
Right, The Warning First
I want to be upfront about this before showing you anything, because it matters.
Use this sparingly.
You are styling markup that Salesforce owns and can change in any of three annual releases. Nothing here is a supported customisation. If they rename a CSS class in Spring ’27, your injection stops working and nobody sends you a warning email.
So this is a tool for genuine gaps, not a general purpose way to redesign Salesforce. Before reaching for it, check whether Themes and Branding, Dynamic Forms, or App Builder can get you there supported. Usually one of them can.
When they genuinely can’t, this beats telling the business no.
Setting It Up
1. Deploy the component from the repo.
2. Drop the CSS Injector component onto whichever Lightning page you want it to affect, via App Builder.
3. Create a CSS Injection Custom Metadata record with your CSS in it.
That’s genuinely it. The component reads its metadata on load and injects whatever’s there.
Why Custom Metadata Is The Right Call Here
This is the part I’m actually pleased with, and it’s a nice illustration of the Open/Closed Principle in practice.
The CSS lives in Custom Metadata, not in the component. Which means:
1. Changing a style is a metadata edit, not a deployment. An admin can do it. No release required.
2. It deploys between orgs properly. Custom Metadata records travel with your metadata, unlike Custom Settings data.
3. Different styles per page. Multiple records, activate what you need where you need it.
4. There’s an active checkbox. When a Salesforce release breaks your selector, an admin unticks a box. They don’t file a ticket and wait for a developer.
That last one is worth the whole design. Given this is inherently fragile, the ability to switch it off instantly is exactly what you want.
Finding Your Selector
Open DevTools, right click the thing you want to change, choose Inspect, and find a class or attribute to target.
The important bit: pick the most stable selector you can find. Salesforce generates a lot of markup, and some of it is far more durable than the rest.
Reasonably stable: SLDS classes like .slds-page-header, and data attributes.
Not stable at all: auto-generated classes with random strings in them, and anything positional like div > div > div:nth-child(3).
If your only option is the second kind, that’s usually a sign this particular change isn’t worth the maintenance burden.
A Sensible Example
/* Make it obvious this is the sandbox, not production */
.slds-global-header {
border-bottom: 4px solid #c23934;
}Small, harmless, targets a stable SLDS class, and genuinely prevents somebody doing something regrettable in the wrong org. That’s the sort of thing this tool is good for.
Do Not Use It For Security
Worth being blunt about, same as I was in the Dynamic Forms post.
Hiding a field with CSS does not protect it. The value is still in the DOM, still in the API, still in reports, still one DevTools click from being visible.
If a user must not see something, that’s field level security. Always. CSS is cosmetics.
A Better Option For Your Own Components
If what you actually want is to restyle a base component inside your own LWC, don’t use this. Use styling hooks, which are the supported mechanism and won’t break between releases.
The CSS Injector is for out of the box pages you have no other way to touch.
And keep a list of every injection you’ve set up. When something looks odd after a release, you want to know immediately where to look.
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!
Check Out More Coding With The Force Stuff!
If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!
Youtube
Patreon
Github
Facebook
Twitter
Instagram
Salesforce Development Books I Recommend
Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Good Non-SF Specific Development Books:
Clean Code
Clean Architecture
