Company branding and custom CSS in Azure Active Directory

Company branding in Azure AD is a nice feature that allows administrators to prettify the sign-in experience for their end-users. It also comes with the possibility of ingesting custom CSS code.

A client recently moved from ADFS to Azure AD, and they wanted to update the sign-in screen to look more like the good old ADFS theme. Now, this is pretty easy to do, but by default, the background image comes with an overlay to improve contrast and legibility.

Time for me to dive into the CSS template and find the corresponding CSS class. It was pretty easy to find, and the CSS template is rich in comments.

The code I added will remove the overlay:

background: rgba(0, 0, 0, 0%);

Next, you can upload the CSS file in the Company Branding settings. It can take up to 15 minutes before the changes are visible. A quick tip to see the result is to open this smart link in a private session: https://portal.office.com/?domain_hint=<yourdomain>

If you like to test your changes first, you can easily edit your CSS using the Developer tools in the browser. Changes will be visible straight away.

Now, this is not a post to convince you to remove the overlay. It’s a matter of personal taste, and in some cases, the overlay will give just the right amount of contrast to make it more pretty.

Let’s see what happens when we remove the overlay for the tenant of our mothership Microsoft. What do you think?

Take it to the next level!

Now, there is a lot you can do with custom CSS. You can go nuts if you want. I’d like to keep things simple, but some of you are here for the looks.? Take a look at the documentation on what you can and cannot do:

CSS reference guide for customizing company branding – Azure AD – Microsoft Entra | Microsoft Learn

Also, check out this post by Thibault for inspiration!
How to customize your Azure AD sign-in page with enhanced capabilities | Thibault Joubert (thijoubert.com)

CSS template can be downloaded here:

https://download.microsoft.com/download/7/2/7/727f287a-125d-4368-a673-a785907ac5ab/custom-styles-template-013023.css

Stay cool!