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

Subscribe to our Email Newsletter