How to Make a Single Div Logo

I love making CSS art; it's one of the best ways to grow your skills - making dynamic-column layouts can only teach you so much.

In this short article, I want to show you how I made this single div logo just using CSS. Feel free to create a pen over on CodePen and follow along!

Getting Started

Before we jump into any code, check out Mihai Dolganiuc on Dribbble - the logo we're building is based off one in his collection.

The first thing that I like to do when creating a new pen is define the colors I'll be using, set a nice background color and center my canvas. I'm using SCSS in this example, but you could use CSS variables if you'd like.

$background: #ebf5fc;
$light-blue: #00cdfc;
$dark-blue: #007fe8;

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background: $background;
}

This gives us a nice off-white color and ensures that any markup we add (coming up next) will be centered on the screen.

Alright! Let's add our single div to the HTML. I'll apply a class name of logo so we can target that in our CSS.

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

Thinking Through the Problem

Now comes the fun part. The only way I can think of easily achieving this effect is by using a Pseudo-Element. A Pseudo-Element allow you to style specific parts of an element. While there are many Pseudo-Element selectors, the ::before selector will allow us to add content before an element. In our case, we can utilize the ::before selector to layer the rounded-square on top of the blue circle.

Putting It All Together

Now that we have a solution, let's start to put everything together. Let's start with the blue circle.

.logo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  // 1
  background: linear-gradient(to bottom left, $dark-blue 15%, $light-blue);
  // 2
  position: relative;
}

There are a few important things here that I want to point out.

1. We use a linear-gradient to fill the circle. This gives us a nice fade between the darker blue and the lighter blue. The 15% will start the darker-blue further into the gradient, giving it a more dominant appearance.

2. Because we're going to use a Pseudo-Element for the rounded-square, we need to ensure that we can position that element based off of the position of the circle. That's why we use position: relative here.

The CSS above gives us the follow result:

Now that the easy part is out of the way, let's start to work on the rounded-square.

First, target the ::before selector. Because I'm using SCSS, I can nest this selector inside my class selector.

.logo {
  ... &::before {
  }
}

The ::before selector won't do anything as-is; we need to set the content, position, background and size of the element first.

&::before {
  // 1
  content: "";
  // 2
  position: absolute;
  // 3
  bottom: 60px;
  left: 60px;
  width: 150px;
  height: 150px;
  background: #ea2f98;
}

1. Because we're using the ::before selector, we need to include the content property. This property is used to add content to the element, and in our case, we just set it equal to an empty string. If the content property is excluded from this rule, the element won't show up at all.

2. Because we set the circle's position to relative we can now position this rounded-square based off of the circle by setting position: absolute here.

3. We move this element 60px from the bottom and 60px from the left of the blue circle.

It's starting to get there - very nice! Let's get those rounded corners in there and get that stroke effect by using a border.

&::before {
    ...
    border-radius: 60px;
    border: 12px solid $background;
  }

At this point, we've pretty much achieved the desired effect. The last major step is to apply the gradient.

Revisit the background property and use a linear-gradient instead of the pink color. In order for the blue circle to show through the rounded-square, we need to have the bottom-left of the square be slightly translucent. We achieve this by using rgba() and setting the alpha to 0.8.

&::before {
    ...
    background: linear-gradient(
      to bottom left,
      rgba(249, 180, 70, 1) 15%,
      rgba(234, 47, 152, 0.8)
    );
    ...
  }

Because we're using a Pseudo-Element and are offsetting it from the circle, the entire logo is now off-center. To fix this, we can simply go back to the .logo rule and add some margin.

.logo {
  margin: 100px 100px 0 0;
  ...;
}

Conclusion

There we go - we've created a single div logo with the assistance of a Pseduo-Element and some gradients! It really wasn't that difficult was it?

Click here to view the final result!