clock  Mon - Sun 8.00 AM - 8.00 PM
play store

How to create a Google logo using HTML and CSS

writter  Hariom Prajapati
Date  26 Jun 2022
Language  HTML
How to create a Google logo using HTML and CSS

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.

So let's start

Step 1 - Open your code editor ( The code editor you are using )


Step 2 - Now create a new file and save it with .html extension to write HTML code inside it.


Step 3 - Create another new file and save it without .css extension to write CSS code inside it.


Step 4 - Now link the .css file with .html file .


Step 5 - Now created a div in your .html file with an "id" (you can choose any ID name but here we choosed Google-logo ).


 <div id="google-logo"> 


Step 6 - Then go to .css file and paste the below code.


#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 the .css file the logo looking like -

Step 7 - Paste the below code in .css file.


#google-logo::before {
    content: "";
    z-index: 100;
    position: absolute;
    top: 50%;
    right: -42.5px;
    transform: translateY(-50%);
    width: 122.5px;
    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;


The final output of the Google logo looking like -