Microsoft’s New Logo Recreated in CSS

Written by Amit Agarwal on Aug 28, 2012
Microsoft Logo

Microsoft recently unveiled a new corporate logo where four colored squares represent Windows, Office, Xbox and Windows Phone family of products.

The PDF document suggests that designers used Adobe Illustrator CS5 to create the original logo but @mohamedmansour shows us how to recreate the same logo using few lines of HTML and CSS3.

If the live demo doesn’t look right in your screen, the Segoe font is probably missing on your computer though some have suggested replacing Segoe with Open Sans, a Google Font.

Here’s the full code courtesy Mansour.


logo {
    font: bold 60px "Segoe UI";
    color: #747273;
    line-height: 1.5em;
    padding-left: 1.7em;

logo:before {
    content: '\2006';
    position: absolute;
    height: 0.095em;
    left: 0;
    box-shadow: 0.35em 0.35em 0 0.25em #f8510c, 
                1.05em 0.35em 0 0.25em #7eba00, 
                0.35em 0.97em 0 0.25em #00a3f4, 
                1.05em 0.97em 0 0.25em #ffba00;     

Also see: Windows 8 Logo in CSS

Document Studio

Generate beautiful and pixel-perfect documents in PDF, Word, Excel or PowerPoint.

Download New
Mail Merge

Send personalized emails from Gmail, include unique attachments, track opens and more.

Download Popular
Save Emails

Download email messages and file attachments from Gmail to your Google Drive.

Download Popular

Subscribe to our Email Newsletter