Windows 8 Logo Recreated in CSS

Written by Amit Agarwal on Jul 15, 2012
windows 8 logo

Microsoft recently unveiled a new logo for Windows 8 that does away with the colorful flag, first introduced with Windows XP in 2001, and instead uses flat, tile-like shapes done in one solid blue color.

The exact typeface that was used to design the logo is unknown though a quick search did reveal that Windows 8 font is very similar to Freight Sans and the Segoe family of sans-serif fonts.

Web developer Vasiliy Zubach has created a CSS version of the Windows 8 logo that uses no images and is written in pure CSS and HTML. Vasiliy also using CSS3 animations to add some motion to the Windows tiles and the whole thing looks exactly like the real logo.

This is the underlying CSS code that does the trick.

<style type="text/css">
.windows_8_logo_container {
	padding: 100px 0;
	background: #fff;
	height: 150px;
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
.window {
	position: relative;
	float: left;
	margin-left: 50px;
	width: 200px;
	height: 150px;
	background: #00adef;
	-webkit-transform: perspective(400px) rotateY(-25deg);
	-moz-transform: perspective(400px) rotateY(-25deg);
	-ms-transform: perspective(400px) rotateY(-25deg);
	-o-transform: perspective(400px) rotateY(-25deg);
	transform: perspective(400px) rotateY(-25deg);
	-webkit-animation: windows_animation 3s infinite;
	-moz-animation: windows_animation 5s infinite;
	-ms-animation: windows_animation 5s infinite;
.window::after, .window::before {
	content: '';
	background: #fff;
	height: 100%;
	width: 10px;
	left: 50%;
	position: absolute;
.window::before {
	left: 0;
	top: 50%;
	margin-top: -5px;
	margin-left: 0;
	height: 10px;
	width: 100%;
	position: absolute;
.logo_text {
	color: #00adef;
	line-height: 150px;
	font-size: 130px;
	padding-left: 20px;
	float: left;

<div class="windows_8_logo_container">
 <div class="window"></div>
 <div class="logo_text">Windows 8</div>

Subscribe to our Email Newsletter