DEV Community

Cover image for Learn CSS: Create the Google Logo
Jennifer Bland
Jennifer Bland

Posted on • Updated on • Originally published at jenniferbland.com

 

Learn CSS: Create the Google Logo

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 Google logo:

  • position relative and absolute
  • pseudo classes ::before and ::after
  • positioning an element that is absolute
  • transform: translateY
  • create triangle

What we will be creating

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

google logo

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>Google Logo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Dissecting the Google Logo

The Google logo is a multi-colored letter G. If we look at it closely it is basically a multi-colored circle with part of it removed and replaced with a line. Knowing that then we will use that in creating the Google logo.

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

    <div class="google-logo"></div>
Enter fullscreen mode Exit fullscreen mode

Creating our multi-colored circle

The first step in creating the Google logo is to create a multi-colored logo. This first step is to create a circle with a different color for each corner. For this demo, I am going to set the circle to have a height and width of 300px.

Add the following code to your style.css file:

.google-logo {
    position: relative;
    width: 300px;
    height: 300px;
    padding: 0;
    border-top: 100px solid #ea4335;
    border-right: 100px solid #4285f4;
    border-bottom: 100px solid #34a853;
    border-left: 100px solid #fbbc05;
    border-radius: 50%;
    background-color: azure;
}
Enter fullscreen mode Exit fullscreen mode

This is what our logo looks like now:

incomplete google logo

Position absolute and relative

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

If you define an element to have position of absolute, the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor.

We defined the .google-logo to have a position of relative. The next step in the logo is to create the line part of the letter G. This element will have a position of absolute.

pseudo class ::before

We need to create the line part of the G letter. We will use the pseudo class :before to draw this line.

We will define the line to have a position of absolute. Then we will define its position by using the top and right properties.

We set the top to be 50%. That makes the top of the line to be at 50% of the circle. This puts the line below the center. This is not what we want. To move it to be in the center we will use a CSS trick using the transform property.

Add the following code to your style.css file:

.google-logo::before {
    content: "";
    /* z-index: 100; */
    position: absolute;
    top: 50%;
    right: -95px;
    transform: translateY(-50%);
    width: 245px;
    height: 100px;
    background-color: #4285f4;
}
Enter fullscreen mode Exit fullscreen mode

This is what our logo looks like now:

incomplete logo

Creating a triangle

The last step of our logo is to create a triangle above the line. This triangle will be transparent which will hide part of our original multi-colored circle.

Here is what we want to accomplish:

add triangle

We will use the pseudo class ::after to draw the triangle. To make the triangle hide part of the circle we will give it the same background color as our body which is azure.

In a previous article about creating the YouTube logo, I showed how to create a triangle in CSS. We will be doing exactly the same here.

Add the following code to your style.css file:

.google-logo::after {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 0;
    height: 0;
    border-top: 200px solid transparent;
    border-right: 200px solid azure;
}
Enter fullscreen mode Exit fullscreen mode

Final Logo

If you view your index.html file in a browser. you should see the completed Google Logo:

final google logo

Let's Connect

Thanks for reading my article today. You can get the source code here.

If you like my content, please consider buying me a coffee β˜•.

Top comments (13)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

A simplified approximation of the logo, but pretty good. The real logo is actually pretty odd in its construction, but somehow visually works!

Designer Brilliantly Explains Why Google's Geometrically Flawed Logo Is Not A Design Error

Google's "G" logo is not geometrically perfect. It's not a perfect circle and the color arcs don't align with each other. The internet and the design

favicon digitalsynopsis.com
Collapse
 
ratracegrad profile image
Jennifer Bland

Thanks for that information about the logo. My goal was to get close enough with my design.

Collapse
 
arbrazil profile image
Arica R.

Hi Jennifer, I recently coded this logo and my work can be found here: codepen.io/arbrazil/pen/bGjbWyW. I was amazed that the format began as a box, then a circle, and finally the logo that we all know and love!

Collapse
 
ratracegrad profile image
Jennifer Bland

Alica,

The many CSS topics in this logo is why I kept it for last.

Thanks for sharing.

Collapse
 
altugdesign profile image
Altug Gurkaynak

I love the approach! Great one!

Collapse
 
ratracegrad profile image
Jennifer Bland

Altug,

Thank you so much

Collapse
 
jd2r profile image
Dominic R.

That's a really neat way of doing it! Thanks for sharing :)

Collapse
 
ratracegrad profile image
Jennifer Bland

Dominic,

Thank you so much

Collapse
 
joshuakasana profile image
Kasana Joshua

Very creative, I love this

Collapse
 
ratracegrad profile image
Jennifer Bland

Kasana,

Thank you so much.

Collapse
 
vulcanwm profile image
Medea

woah this explains it in a very nice way!

Collapse
 
shivamdangi7 profile image
Shivam Singh Dangi

Well i think creating logo with css must be pretty hard . But after looking at the code it is fairly easy as butter.

Collapse
 
Sloan, the sloth mascot
Comment deleted