Introducing custom CSS for AuthKit: Unlock full styling flexibility

We’re excited to announce the release of custom CSS support within the WorkOS AuthKit branding editor. This update adds a powerful new layer of visual control for teams that want to go beyond color pickers and logos.

You can now write and apply your own CSS styles to fine-tune your AuthKit components—while keeping everything secure and stable.

Why we’re launching this

Until now, customization in AuthKit has been intentionally simple and streamlined. Users could set global branding styles like primary colors, logos, and layout options, making it easy to get a clean, branded login box up and running quickly. That’s been ideal for many teams—especially those looking for speed, security, and visual cohesion without heavy design work.

But for teams with more refined visual guidelines or complex brand systems, the current options haven’t been quite enough.

This new custom CSS feature bridges the gap between basic branding controls and a fully custom UI, giving developers and designers the precision they’ve been asking for—without requiring a complete rebuild.

What you can do with it

With this release, the AuthKit branding editor becomes dramatically more powerful and flexible—without compromising the simplicity and safety that WorkOS is known for.

Here’s a breakdown of everything the new custom CSS capability enables.

Style individual elements with precision

Sometimes brand configuration just isn’t enough. With custom CSS, you can:

• Style individual UI components—such as input fields, buttons, labels, and more.
• Apply effects like drop shadows, padding adjustments, borders, font tweaks, or specific color rules to fine-tune your brand feel.
• Override or enhance default styles selectively, rather than replacing the entire theme.

This makes it easy to meet accessibility guidelines, match your product’s design system, or just add polish in the ways that matter most.

Apply cross-page styling with global scope

The custom CSS is applied globally across all AuthKit pages, including:

• Login
• Signup
• Password reset
• Magic auth
• SSO connections
• Organization selection

This ensures visual consistency across the entire authentication experience and saves you from needing to restyle each screen independently.

Use remote images for backgrounds and textures

Want a background image or subtle texture behind your AuthKit components? You can now:

• Reference externally hosted images.
• Create branded experiences using custom graphics, gradients, or photo-based backdrops.
• Stay compliant with WorkOS security protocols—no risk of unsafe injection.

Whether you're adding a faint grid, a company mascot watermark, or a hero image—your login box can now be part of a fully immersive brand environment.

Target elements with ease

We’ve updated the editor to make customizing styles even more intuitive with a new element targeting tool within the Custom CSS tab. This tool enhances the default preview experience by letting users hover over or click on elements within the live preview to highlight them and auto-focus the corresponding element in the sidebar. This makes it faster to identify and style the exact part of the UI you want to modify.

While the new targeting tool helps with navigation and selection, more advanced interactions like :hover, :focus, and :active states still require using your browser’s native developer tools to inspect and test. However, with the addition of custom CSS support, you can now write styles for these interactive states directly—something that wasn’t previously possible in the branding editor.

This enhancement streamlines the process of applying precise visual styles, while giving you the freedom to test and iterate more efficiently, whether you’re working directly in the editor or toggling over to dev tools for deeper inspection.

A smarter back button that preserves your work

Previously, navigating away from the style editor would discard unsaved changes, which made experimentation risky and frustrating.

Now, with the updated back button logic your customizations are preserved as you move through different tabs or views. You can explore and return to your work-in-progress without fear of data loss. This change encourages more confident editing and helps users take full advantage of the new styling power.

Try it out

Ready to start customizing your login box?

Check out the documentation to get started with custom CSS in AuthKit.

We’re just getting started with this advanced customization pathway—and we’d love to hear your feedback.

What worked?

What’s missing?

What would make your job even easier?

Share your feedback with us here.