How to Create Google logo with HTML and CSS ?

Last Updated : 12 Mar, 2024

The Google logo is a globally recognized symbol of the tech giant, known for its colourful and playful design. It consists of the word "Google" in a unique font, with each letter in a different colour, representing the company's diverse range of products and services. In this article, we will design the Google logo with the help of HTML and CSS.

Approach to create Google Logo:

Create a HTML structure consists of a container <div> with an ID of 'container' and a logo <div> with an ID of 'logo'. Inside the logo <div>, there is a <div> with a class of 'g-line' and four <span> elements with classes of 'red', 'yellow', 'green', and 'blue'.
The CSS file (style.css) contains the styles for the Google logo. The 'g-line' class is used to create the letter 'G' in the logo, and the 'red', 'yellow', 'green', and 'blue' classes are used to create the colors of the logo.
The colors of the logo are created using the 'red', 'yellow', 'green', and 'blue' classes. Each <span> element represents a color, and the background color of each <span> is set to the corresponding color.
The 'g-line' class is used to style the letter 'G' in the logo. It sets the width, height, and background color of the 'G' to create the shape of the letter.
The logo is designed to be responsive and work well on different screen sizes. The CSS styles are applied using relative units such as percentages and ems to ensure that the logo scales appropriately on different devices and screen resolutions.

Example: Implementation to design the logo of Google.

HTML

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

<head>
    <title>Google Logo</title>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="container">
        <div id="logo">
            <div class="g-line"></div>
            <span class="red"></span>
            <span class="yellow"></span>
            <span class="green"></span>
            <span class="blue"></span>
        </div>
    </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');

html,
body {
    background: #f1f1f1;
    margin: 0;
    min-height: 100%;
    font-family: 'Roboto', sans-serif;
}

#container {
    position: relative;
    margin: 50px auto 0;
    width: 1000px;
    height: 300px;
}

#logo {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
    border: 25px solid #f1f1f1;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}

#logo::after {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: #f1f1f1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 4;
}

#logo::before {
    content: '';
    display: block;
    width: 35%;
    height: 32%;
    background: #f1f1f1;
    position: absolute;
    right: 0;
    bottom: 50%;
    transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    z-index: 10;
}

.g-line,
.yellow,
.green,
.blue,
.red {
    position: absolute;
    z-index: 2;
}

.g-line {
    width: 50%;
    height: 20%;
    background: #0091ea;
    right: 0;
    margin: auto;
    border-bottom-right-radius: 4px 20px;
    top: 0;
    bottom: 0;
    z-index: 15;
}

.yellow {
    width: 40%;
    height: 40%;
    left: -15%;
    bottom: 32%;
    background: #ffc107;
    transform: rotateZ(-48deg);
    -webkit-transform: rotateZ(-48deg);
    z-index: 3;
}

.green {
    width: 100%;
    height: 50%;
    bottom: 0;
    border-radius: 0 0 100% 100%;
    background: #4caf50;
}

.blue {
    width: 35%;
    height: 32%;
    background: #0091ea;
    right: 0;
    top: 50%;
    transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
}

.red {
    width: 81%;
    height: 50%;
    top: 0;
    background: #f44336;
}