Learn CSS: Create the Microsoft Logo (Version 2)

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Microsoft logo:

box-shadow

In a previous article, I showed you how to create the Microsoft Logo using CSS Grid. In this article, I will show you how to create the same logo using the box-shadow property.

What we will be creating

We will create the Microsoft logo in pure CSS. It will look like this:

Create our starter files

Let's start by creating two files called index.html and style.css. In your index.html file add the following starter code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microsoft Logo v2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

In the style.css file add the following starter code:

body{
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: azure;
}

box-shadow

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

We will take advantage of that by creating one square of the logo and then adding three shadows for the other squares.

Add the following one line inside the body tag in your index.html file:

<div class="microsoft-logo"></div>

Add this code to your style.css file:

.microsoft-logo {
    background-color: #f25022;
    box-shadow: 
            220px 0 0 0 #7fba00,
            0 220px 0 0 #00a4ef,
            220px 220px 0 0 #ffb900;
    height: 200px;
    width: 200px;
}

The first line in the box-shadow property creates a shadow 220px on the right side with a green color. Since our square is 200px wide and high, this starts the shadow 20px to the right of the initial box.

The 2nd line in the box-shadow property creates a shadow 220px below the initial box and sets the color to blue.

The 3rd line in the box-shadow property creates a shadow 220px to the right and 220px below the initial box and sets the color to orange.