How to Create a Google Logo using HTML and CSS

In this tutorial, we will see that how to create a Google logo using HTML and CSS.

You can also see other logos here https://www.teknowize.com/code-snipits/logo

How to create a google logo using HTML and CSS

So let's follow all the steps to create logo using HTML and CSS.

Step 1 - Create a `div` with an `id` of `google-logo` in your HTML.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How to Create a Google Logo using HTML and CSS</title>
</head>

<body>
    <div id="google-logo">
    </div>
</body>

</html>

Step 2 - Now paste the below code in your CSS.

#google-logo {
    position: relative;
    border-top: 50px solid #EA4335;
    border-right: 50px solid #4285F4;
    border-bottom: 50px solid #34A853;
    border-left: 50px solid #FBBC05;
    border-radius: 50%;
    background-color: #FFFFFF;
    width: 150px;
    height: 150px;
    padding: 0;
    margin: 10vh auto 0;
    }

After pasting the code inside your CSS the logo looking like -

Step 7 - Also paste the below code in your CSS.

#google-logo::before {
    content: "";
    z-index: 100;
    position: absolute;
    top: 50%;
    right: -42.5px;
    transform: translateY(-50%);
    width: 122.5px;
    height:50px;
    background: #4285F4;
  }  

 #google-logo::after {
    content: "";
    z-index: 105;
    position: absolute;
    border-top:46px solid transparent;
    border-right:105px solid #fff;
   top: -27px;
    right: -47px;
    width: 90px;
    height: 31px;
}

Here we combined HTML and CSS code together. (You can also use external CSS file according to your needs)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How to Create a Google Logo using HTML and CSS</title>

    <style>
        #google-logo {
            position: relative;
            border-top: 50px solid #EA4335;
            border-right: 50px solid #4285F4;
            border-bottom: 50px solid #34A853;
            border-left: 50px solid #FBBC05;
            border-radius: 50%;
            background-color: #FFFFFF;
            width: 150px;
            height: 150px;
            padding: 0;
            margin: 10vh auto 0;
        }

        #google-logo::before {
            content: "";
            z-index: 100;
            position: absolute;
            top: 50%;
            right: -42.5px;
            transform: translateY(-50%);
            width: 122.5px;
            height: 50px;
            background: #4285F4;
        }

        #google-logo::after {
            content: "";
            z-index: 105;
            position: absolute;
            border-top: 46px solid transparent;
            border-right: 105px solid #fff;
            top: -27px;
            right: -47px;
            width: 90px;
            height: 31px;
        }
    </style>
</head>

<body>
    <div id="google-logo">
    </div>
</body>

</html>

The final output of the Google logo looking like -

How to Create a Google Logo using HTML and CSS

How to create a google logo using HTML and CSS

Step 1 - Create a div with an id of google-logo in your HTML.

Step 2 - Now paste the below code in your CSS.

Step 7 - Also paste the below code in your CSS.

Others Logos

Enter your details before comment

Step 1 - Create a `div` with an `id` of `google-logo` in your HTML.