M365 CSS Generator

Create custom CSS for Microsoft 365 branding with live preview

Configuration

Sign In Box

Title

Boilerplate Text

Promoted Fed Cred Box

Primary Button

Secondary Button

Live Preview

Sample Title

This shows the title alignment and margin

Important Notice

This is sample boilerplate text showing background and text colors

Promoted Fed Cred Box

This shows the border radius for the promoted federation credential box

Primary Button

Hover, focus, and active states are interactive

Secondary Button

Hover, focus, and active states are interactive

Generated CSS